tailwindcss-rails 4.0.0.rc3 → 4.0.0.rc4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9132c959c2d738315776b226dc5fe8292972e0e6a344e8d3f7c9294465910998
-  data.tar.gz: dd76376002a3a4ab5051b4affc63f57f0094fe3a95984d7b3c0ea3cd58f8161a
+  metadata.gz: 12604797b6ffc0e9448b859c4b25511065fc86dd28c1479d9a48186ac7b2cfd1
+  data.tar.gz: b908633069e894863319afa7f3ea64737e47e906d17f257e02763548cca1d2c4
 SHA512:
-  metadata.gz: 8de6d29182f7a5599944c65e6d2e86bc22fe8ebc3fa55a6eb7a2b6f71d5450a9349458c86343a6a47d184b96251acc2d1c078fd99890bfe74f32cbb3b9b5db8f
-  data.tar.gz: 6317cc4ea1fc599657af5cfee72ef1c04dd8a5caa8e6dd10a2e0c52b3ba6ce634dae5058abc86cfd2d4daa74677ebb020fc385d3b46a99007198b9343259f8bc
+  metadata.gz: f95003629c04627ceef411f2def2cb09d4a7f3d9452d5be2ed1871d8912f7ceb16a3db49948f444e5c2d67d1cf8dac3ccca17425eb7b15b2cd2395acd4ab61ce
+  data.tar.gz: c2f5deca8a2eb716ed9d006d318268640e5f83894302111eeb648afdd861834ad732dfc387ad0985eabecf4570b35f68e8b77871399c8fb293da499861e7e533

data/README.md

@@ -13,6 +13,7 @@
   * [You don't _have_ to upgrade](#you-dont-_have_-to-upgrade)
   * [Upgrade steps](#upgrade-steps)
   * [Troubleshooting](#troubleshooting)
+  * [Updating CSS class names for v4](#updating-css-class-names-for-v4)
 - [Developing with Tailwindcss](#developing-with-tailwindcss)
   * [Configuration and commands](#configuration-and-commands)
   * [Building for production](#building-for-production)
@@ -91,18 +92,47 @@ gem "tailwindcss-ruby", "~> 3.4"
 
 First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you're transitively depending on `tailwindcss-ruby` v4.
 
-``` html
+
+```html
 # Gemfile
 gem "tailwindcss-rails", "~> 4.0" # which transitively pins tailwindcss-ruby to v4
 ```
 
-Then, run the `tailwindcss:upgrade` task. Among other things, this will try to run the official Tailwind upgrade utility. It requires `npx` in order to run, but it's a one-time operation and is *highly recommended* for a successful upgrade.
+If you want to migrate class names for v4 (optional), apply this [step](#upgrading-class-names-for-v4) and continue this guide.
+
+Add the following line to the `.gitignore` file:
+
+```gitignore
+/node_modules
+```
+(So the Tailwind update tool won’t dig through your node_modules files and infer incorrect migrations, because it complies with ``.gitignore`` constraints)
+
+Then create a ``package.json`` in the root of the project:
+
+```jsonc
+{
+  "name": "app_name",
+  "version": "1.0.0",
+  "dependencies": {
+    "tailwindcss": "^3.4.17", // Mandatory!!
+    // Install all plugins and modules that are referenced in tailwind.config.js
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16"
+    // And so on...
+  }
+}
+```
+**Run** ``npm install`` (or ``yarn install`` if using ``yarn``)
+
+Then, **run** the `tailwindcss:upgrade` task. Among other things, this will try to run the official Tailwind upgrade utility. It requires `npx` in order to run, but it's a one-time operation and is *highly recommended* for a successful upgrade.
 
 Here's what the upgrade task does:
 
 - Cleans up some things in the generated `config/tailwind.config.js`.
 - If present, moves `config/postcss.config.js` to the root directory.
-- If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind`.
+- If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind/application.css`.
 - Removes unnecessary `stylesheet_link_tag "tailwindcss"` tags from the application layout.
 - Removes references to the Inter font from the application layout.
 - Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
@@ -119,22 +149,22 @@ $ bin/rails tailwindcss:upgrade
         gsub    app/views/layouts/application.html.erb
   Remove unnecessary stylesheet_link_tag from application layout
         gsub    app/views/layouts/application.html.erb
-  Moving application.tailwind.css to /home/user/myapp/app/assets/tailwind
-      create    app/assets/tailwind/application.tailwind.css
+  Moving /home/user/myapp/app/assets/stylesheets/application.tailwind.css to /home/user/myapp/app/assets/tailwind/application.css
+      create    app/assets/tailwind/application.css
       remove    app/assets/stylesheets/application.tailwind.css
 10.9.0
   Running the upstream Tailwind CSS upgrader
          run    npx @tailwindcss/upgrade@next --force --config /home/user/myapp/config/tailwind.config.js from "."
 ≈ tailwindcss v4.0.0
 │ Searching for CSS files in the current directory and its subdirectories…
-│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.tailwind.css`
+│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.css`
 │ Migrating JavaScript configuration files…
 │ ↳ The configuration file at `./config/tailwind.config.js` could not be automatically migrated to the new CSS
 │   configuration format, so your CSS has been updated to load your existing configuration file.
 │ Migrating templates…
 │ ↳ Migrated templates for configuration file: `./config/tailwind.config.js`
 │ Migrating stylesheets…
-│ ↳ Migrated stylesheet: `./app/assets/tailwind/application.tailwind.css`
+│ ↳ Migrated stylesheet: `./app/assets/tailwind/application.css`
 │ ↳ No PostCSS config found, skipping migration.
 │ Updating dependencies…
 │ Could not detect a package manager. Please manually update `tailwindcss` to v4.
@@ -145,9 +175,9 @@ $ bin/rails tailwindcss:upgrade
 Done in 56ms
          run  bundle install --quiet
 ```
-
 </details>
 
+
 If this doesn't succeed, it's likely that you've customized your Tailwind configuration and you'll need to do some work to make sure your application upgrades. Please read the [official upgrade guide](https://tailwindcss.com/docs/upgrade-guide)!
 
 
@@ -157,21 +187,45 @@ You may want to check out [TailwindCSS v4 - upgrade experience report · rails/t
 
 We know there are some cases we haven't addressed with the upgrade task:
 
-- If the user isn’t using PostCSS, some migrations (e.g., updating class names in the view files) may fail
 - In setups without JavaScript tooling, the update process may fail to fully migrate `tailwind.config.js` because the tool assumes that the imported packages (e.g., tailwind plugins) are installed via a package manager, allowing them to be called.
 
 We'll try to improve the upgrade process over time, but for now you may need to do some manual work to upgrade.
 
 
+### Updating CSS class names for v4
+
+Before running the upgrade task, go to ``config/tailwind.config.js`` update the ``content`` part to:
+
+```js
+  content: [
+    '../public/*.html',
+    '../app/helpers/**/*.rb',
+    '../app/javascript/**/*.js',
+    '../app/views/**/*.{erb,haml,html,slim}'
+  ],
+```
+(Just add an additional ``.`` to all the paths referenced)
+
+Run the upstream upgrader as instructed above.
+
+Then, once you've run that successfully:
+
+- **Delete** ``package.json``, ``node_modules/`` and ``package-lock.json`` (or ``yarn.lock``), plus remove ``/node_modules`` from ``.gitignore``.
+- **Go** to your CSS file and remove the following line (if present):
+  ```css
+  @plugin '@tailwindcss/container-queries';
+  ```
+
+
 ## Developing with Tailwindcss
 
 ### Configuration and commands
 
-#### Input file: `app/assets/tailwind/application.tailwind.css`
+#### Input file: `app/assets/tailwind/application.css`
 
-The `tailwindcss:install` task will generate a Tailwind input file in `app/assets/tailwind/application.tailwind.css`. This is where you import the plugins you want to use and where you can setup your custom `@apply` rules.
+The `tailwindcss:install` task will generate a Tailwind input file in `app/assets/tailwind/application.css`. This is where you import the plugins you want to use and where you can setup your custom `@apply` rules.
 
-⚠ The location of this file changed in v4, from `app/assets/stylesheets` to `app/assets/tailwind`. The `tailwindcss:upgrade` task will move it for you.
+⚠ The location of this file changed in v4, from `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind/application.css`. The `tailwindcss:upgrade` task will move it for you.
 
 #### Output file: `app/assets/builds/tailwind.css`
 

data/lib/install/install_tailwindcss.rb

@@ -1,6 +1,6 @@
 APPLICATION_LAYOUT_PATH             = Rails.root.join("app/views/layouts/application.html.erb")
 CENTERING_CONTAINER_INSERTION_POINT = /^\s*<%= yield %>/.freeze
-TAILWIND_ASSET_PATH                 = Rails.root.join("app/assets/tailwind")
+TAILWIND_ASSET_PATH                 = Rails.root.join("app/assets/tailwind/application.css")
 
 if APPLICATION_LAYOUT_PATH.exist?
   unless File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/)
@@ -32,9 +32,9 @@ if Rails.root.join(".gitignore").exist?
   append_to_file(".gitignore", %(\n/app/assets/builds/*\n!/app/assets/builds/.keep\n))
 end
 
-unless TAILWIND_ASSET_PATH.join("application.tailwind.css").exist?
-  say "Add default #{TAILWIND_ASSET_PATH}/application.tailwind.css"
-  copy_file "#{__dir__}/application.tailwind.css", TAILWIND_ASSET_PATH.join("application.tailwind.css")
+unless TAILWIND_ASSET_PATH.exist?
+  say "Add default #{TAILWIND_ASSET_PATH}"
+  copy_file "#{__dir__}/application.css", TAILWIND_ASSET_PATH
 end
 
 if Rails.root.join("Procfile.dev").exist?

data/lib/install/upgrade_tailwindcss.rb

@@ -1,8 +1,8 @@
 TAILWIND_CONFIG_PATH = Rails.root.join("config/tailwind.config.js")
 APPLICATION_LAYOUT_PATH = Rails.root.join("app/views/layouts/application.html.erb")
 POSTCSS_CONFIG_PATH = Rails.root.join("config/postcss.config.js")
-OLD_TAILWIND_ASSET_PATH = Rails.root.join("app/assets/stylesheets")
-TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind")
+OLD_TAILWIND_ASSET_PATH = Rails.root.join("app/assets/stylesheets/application.tailwind.css")
+TAILWIND_ASSET_PATH = Rails.root.join("app/assets/tailwind/application.css")
 
 unless TAILWIND_CONFIG_PATH.exist?
   say "Default tailwind.config.js is missing!", :red
@@ -38,10 +38,10 @@ else
   say %(        Please check your layouts and remove any "inter-font" stylesheet links.)
 end
 
-if OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css").exist?
-  say "Moving application.tailwind.css to #{TAILWIND_ASSET_PATH}"
-  copy_file OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css"), TAILWIND_ASSET_PATH.join("application.tailwind.css")
-  remove_file OLD_TAILWIND_ASSET_PATH.join("application.tailwind.css")
+if OLD_TAILWIND_ASSET_PATH.exist?
+  say "Moving #{OLD_TAILWIND_ASSET_PATH} to #{TAILWIND_ASSET_PATH}"
+  copy_file OLD_TAILWIND_ASSET_PATH, TAILWIND_ASSET_PATH
+  remove_file OLD_TAILWIND_ASSET_PATH
 end
 
 if system("npx --version")

data/lib/tailwindcss/commands.rb

@@ -8,7 +8,7 @@ module Tailwindcss
 
         command = [
           Tailwindcss::Ruby.executable(**kwargs),
-          "-i", rails_root.join("app/assets/tailwind/application.tailwind.css").to_s,
+          "-i", rails_root.join("app/assets/tailwind/application.css").to_s,
           "-o", rails_root.join("app/assets/builds/tailwind.css").to_s,
         ]
 

data/lib/tailwindcss/version.rb

@@ -1,3 +1,3 @@
 module Tailwindcss
-  VERSION = "4.0.0.rc3"
+  VERSION = "4.0.0.rc4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tailwindcss-rails
 version: !ruby/object:Gem::Version
-  version: 4.0.0.rc3
+  version: 4.0.0.rc4
 platform: ruby
 authors:
 - David Heinemeier Hansson
@@ -64,7 +64,7 @@ files:
 - lib/generators/tailwindcss/scaffold/templates/partial.html.erb.tt
 - lib/generators/tailwindcss/scaffold/templates/show.html.erb.tt
 - lib/install/Procfile.dev
-- lib/install/application.tailwind.css
+- lib/install/application.css
 - lib/install/dev
 - lib/install/install_tailwindcss.rb
 - lib/install/upgrade_tailwindcss.rb