tailwindcss-rails 4.0.0.rc1 → 4.0.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90c12e592470225fa2691b3d6a05f37a9e2ec42105914808503fb2ff8dcad26d
-  data.tar.gz: b8ed05daad38b1e5d444e642d2c6959a9bdeccf7b73dffb64cd6180298f9e9e0
+  metadata.gz: 25b499cfb3a5bb8ff72c083b3db9b55f805841e72f4c7d70822f43ad549841f1
+  data.tar.gz: ce5a7fec5aebe849b5ec925e26314a2d49757457447f4abdce46a05a3d00f4c9
 SHA512:
-  metadata.gz: 503d686e869134450c4b7088881779bc63db162e2b75864c2ced185a4575a8d3425c8f7afb7929e892dbf1196e79cf163480e7e4d637a0a6467e03e26b9f256d
-  data.tar.gz: b44d09d37a35e990f020526880d4d227759b24f979c3443009d7dc5f2f0ffca03ad8a3ea686b6e969530f05e4e4bf96337812132ef58f5c7ff85657a94dfe85d
+  metadata.gz: aa8f794bbd71a24f565fe426d92195568421ce59f2c3d025e3efec7ff6e9b809a040639db693de0945fa717e559ace7c26ffef61f321524cf27000ad1fb6192d
+  data.tar.gz: 7202ece89941519c53a56cb4c276abfac516f59f9baada3212283b499dd51432747ee9fb2a1e95416f7bb671da70d95a7b609a734e4ae34d3f9479e6027df3a6

data/README.md

@@ -12,6 +12,7 @@
 - [Upgrading your application from Tailwind v3 to v4](#upgrading-your-application-from-tailwind-v3-to-v4)
   * [You don't _have_ to upgrade](#you-dont-_have_-to-upgrade)
   * [Upgrade steps](#upgrade-steps)
+  * [Plugins](#plugins)
   * [Troubleshooting](#troubleshooting)
 - [Developing with Tailwindcss](#developing-with-tailwindcss)
   * [Configuration and commands](#configuration-and-commands)
@@ -28,7 +29,6 @@
   * [Class names must be spelled out](#class-names-must-be-spelled-out)
   * [`ERROR: Cannot find the tailwindcss executable` for supported platform](#error-cannot-find-the-tailwindcss-executable-for-supported-platform)
   * [Using asset-pipeline assets](#using-asset-pipeline-assets)
-  * [Conflict with pre-existing asset pipeline stylesheets](#conflict-with-pre-existing-asset-pipeline-stylesheets)
 - [License](#license)
 
 <!-- tocstop -->
@@ -67,11 +67,19 @@ A full explanation of a Tailwind v4 upgrade is out of scope for this README, so
 
 This gem will help with some of the mechanics of the upgrade, however.
 
+
 ### You don't _have_ to upgrade
 
 Keep in mind that you don't _need_ to upgrade. You can stay on Tailwind v3 for the foreseeable future if you prefer not to migrate now, or if your migration runs into problems.
 
-Just make sure you're pinning the version of **both** `tailwindcss-rails` and `tailwindcss-ruby`:
+Just make sure you're either pinned to v3.3.1 of this gem:
+
+``` ruby
+# Gemfile
+gem "tailwindcss-rails", "3.3.1" # which transitively pins tailwindcss-ruby to v3
+```
+
+or if you're on an earlier version of this gem, make sure you're pinning the version of **both** `tailwindcss-rails` and `tailwindcss-ruby`:
 
 ``` ruby
 # Gemfile
@@ -86,7 +94,7 @@ First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you
 
 ``` html
 # Gemfile
-gem "tailwindcss-rails", "~> 4.0"
+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.
@@ -94,59 +102,63 @@ Then, run the `tailwindcss:upgrade` task. Among other things, this will try to r
 Here's what the upgrade task does:
 
 - Cleans up some things in the generated `config/tailwind.config.js`.
-- Runs the upstream upgrader (note: requires `npx` to run the one-time upgrade, but highly recommended).
-- Removes references to the Inter font from the application layout.
 - If present, moves `config/postcss.config.js` to the root directory.
+- If present, moves `app/assets/stylesheets/application.tailwind.css` to `app/assets/tailwind`.
+- 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).
 
-Here's what that upgrade looks like on a vanilla Rails app:
+<details>
+<summary>Here's what that upgrade looks like on a vanilla Rails app.</summary>
 
 ``` sh
 $ bin/rails tailwindcss:upgrade
        apply  /path/to/tailwindcss-rails/lib/install/upgrade_tailwindcss.rb
   Removing references to 'defaultTheme' from /home/user/myapp/config/tailwind.config.js
         gsub    config/tailwind.config.js
+  Strip Inter font CSS from application layout
+        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
+      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/stylesheets/application.tailwind.css`
-
+│ ↳ Linked `./config/tailwind.config.js` to `./app/assets/tailwind/application.tailwind.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/stylesheets/application.tailwind.css`
-
+│ ↳ Migrated stylesheet: `./app/assets/tailwind/application.tailwind.css`
 │ ↳ No PostCSS config found, skipping migration.
-
 │ Updating dependencies…
-
 │ Could not detect a package manager. Please manually update `tailwindcss` to v4.
-
 │ Verify the changes and commit them to your repository.
-
-  Strip Inter font CSS from application layout
-        gsub    app/views/layouts/application.html.erb
   Compile initial Tailwind build
          run    rails tailwindcss:build from "."
 ≈ tailwindcss v4.0.0
-
-Done in 52ms
+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)!
 
 
+### Plugins
+
+In Tailwind CLI v3, some Tailwind plugins were included by default in the CLI tool. However, in v4 these default plugins have been removed.
+
+In order to use any plugins with v4, either by declaring them in your (optional) config file or using the [`@plugin` directive](https://tailwindcss.com/docs/functions-and-directives#plugin-directive), it's necessary to install them using a local javascript package manager.
+
+
 ### Troubleshooting
 
 You may want to check out [TailwindCSS v4 - upgrade experience report · rails/tailwindcss-rails · Discussion #450](https://github.com/rails/tailwindcss-rails/discussions/450) if you're having trouble upgrading.
@@ -163,9 +175,11 @@ We'll try to improve the upgrade process over time, but for now you may need to
 
 ### Configuration and commands
 
-#### Input file: `app/assets/stylesheets/application.tailwind.css`
+#### Input file: `app/assets/tailwind/application.tailwind.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 installer will generate a Tailwind input file in `app/assets/stylesheets/application.tailwind.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.
 
 #### Output file: `app/assets/builds/tailwind.css`
 
@@ -257,13 +271,10 @@ For example, to enable nesting:
 
 ```js
 // postcss.config.js
-module.exports = {
+export default {
   plugins: {
-    'postcss-import': {},
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    "@tailwindcss/postcss": {},
+  }
 }
 ```
 
@@ -275,10 +286,9 @@ module.exports = {
   "name": "my app",
   "private": true,
   "dependencies": {
-    "postcss-advanced-variables": "^4.0.0",
-    "postcss-import": "^16.0.1",
-    "postcss-mixins": "^9.0.4",
-    "tailwindcss": "^3.4.1"
+    "@tailwindcss/postcss": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "postcss": "^8.5.1"
   }
 }
 ```
@@ -341,17 +351,6 @@ The inline version also works:
 <section class="bg-[url('image.svg')]">Has the image as it's background</section>
 ```
 
-### Conflict with pre-existing asset pipeline stylesheets
-
-If you get a warning `Unrecognized at-rule or error parsing at-rule ‘@tailwind’.` in the browser console after installation, you are incorrectly double-processing `application.tailwind.css`. This is a misconfiguration, even though the styles will be fully effective in many cases.
-
-The file `application.tailwind.css` is installed when running `rails tailwindcss:install` and is placed alongside the common `application.css` in `app/assets/stylesheets`. Because the `application.css` in a newly generated Rails app includes a `require_tree .` directive, the asset pipeline incorrectly processes `application.tailwind.css`, where it should be taken care of by `tailwindcss`. The asset pipeline ignores TailwindCSS's at-directives, and the browser can't process them.
-
-To fix the warning, you can either remove the `application.css`, if you don't plan to use the asset pipeline for stylesheets, and instead rely on TailwindCSS completely for styles. This is what this installer assumes.
-
-Or, if you do want to keep using the asset pipeline in parallel, make sure to remove the `require_tree .` line from the `application.css`.
-
-
 ## License
 
 Tailwind for Rails is released under the [MIT License](https://opensource.org/licenses/MIT).

data/lib/install/install_tailwindcss.rb

@@ -1,12 +1,16 @@
 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")
 
 if APPLICATION_LAYOUT_PATH.exist?
-  say "Add Tailwindcss include tags and container element in application layout"
-  insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
-    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
-  ERB
+  unless File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/)
+    say "Add Tailwindcss include tags in application layout"
+    insert_into_file APPLICATION_LAYOUT_PATH.to_s, <<~ERB.indent(4), before: /^\s*<%= stylesheet_link_tag/
+      <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    ERB
+  end
 
+  say "Add Tailwindcss container element in application layout"
   if File.open(APPLICATION_LAYOUT_PATH).read =~ /<body>\n\s*<%= yield %>\n\s*<\/body>/
     insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(    <main class="container mx-auto mt-28 px-5 flex">\n  ), before: CENTERING_CONTAINER_INSERTION_POINT
     insert_into_file APPLICATION_LAYOUT_PATH.to_s, %(\n    </main>),  after: CENTERING_CONTAINER_INSERTION_POINT
@@ -28,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 Rails.root.join("app/assets/stylesheets/application.tailwind.css").exist?
-  say "Add default app/assets/stylesheets/application.tailwind.css"
-  copy_file "#{__dir__}/application.tailwind.css", "app/assets/stylesheets/application.tailwind.css"
+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")
 end
 
 if Rails.root.join("Procfile.dev").exist?

data/lib/install/upgrade_tailwindcss.rb

@@ -1,6 +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")
 
 unless TAILWIND_CONFIG_PATH.exist?
   say "Default tailwind.config.js is missing!", :red
@@ -14,7 +16,32 @@ end
 
 if POSTCSS_CONFIG_PATH.exist?
   say "Moving PostCSS configuration to application root directory"
-  FileUtils.mv(POSTCSS_CONFIG_PATH, Rails.root, verbose: true) || abort
+  copy_file POSTCSS_CONFIG_PATH, Rails.root.join("postcss.config.js")
+  remove_file POSTCSS_CONFIG_PATH
+end
+
+if APPLICATION_LAYOUT_PATH.exist?
+  if File.read(APPLICATION_LAYOUT_PATH).match?(/"inter-font"/)
+    say "Strip Inter font CSS from application layout"
+    gsub_file APPLICATION_LAYOUT_PATH.to_s, %r{, "inter-font"}, ""
+  else
+    say "Inter font CSS not detected.", :green
+  end
+
+  if File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag :app/) &&
+     File.read(APPLICATION_LAYOUT_PATH).match?(/stylesheet_link_tag "tailwind"/)
+    say "Remove unnecessary stylesheet_link_tag from application layout"
+    gsub_file APPLICATION_LAYOUT_PATH.to_s, %r{^\s*<%= stylesheet_link_tag "tailwind".*%>$}, ""
+  end
+else
+  say "Default application.html.erb is missing!", :red
+  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")
 end
 
 if system("npx --version")
@@ -32,17 +59,5 @@ else
   abort
 end
 
-if APPLICATION_LAYOUT_PATH.exist?
-  if File.read(APPLICATION_LAYOUT_PATH).match?(/"inter-font"/)
-    say "Strip Inter font CSS from application layout"
-    gsub_file APPLICATION_LAYOUT_PATH.to_s, %r{, "inter-font"}, ""
-  else
-    say "Inter font CSS not detected.", :green
-  end
-else
-  say "Default application.html.erb is missing!", :red
-  say %(        Please check your layouts and remove any "inter-font" stylesheet links.)
-end
-
 say "Compile initial Tailwind build"
 run "rails tailwindcss:build"

data/lib/tailwindcss/commands.rb

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

data/lib/tailwindcss/engine.rb

@@ -6,6 +6,12 @@ module Tailwindcss
       Rails.application.config.generators.stylesheets = false
     end
 
+    initializer "tailwindcss.exclude_asset_path", after: "propshaft.append_assets_path" do
+      if Rails.application.config.assets.excluded_paths # the app may not be using Propshaft
+        Rails.application.config.assets.excluded_paths << Rails.root.join("app/assets/tailwind")
+      end
+    end
+
     config.app_generators do |g|
       g.template_engine :tailwindcss
     end

data/lib/tailwindcss/version.rb

@@ -1,3 +1,3 @@
 module Tailwindcss
-  VERSION = "4.0.0.rc1"
+  VERSION = "4.0.0.rc2"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: tailwindcss-rails
 version: !ruby/object:Gem::Version
-  version: 4.0.0.rc1
+  version: 4.0.0.rc2
 platform: ruby
 authors:
 - David Heinemeier Hansson
 bindir: bin
 cert_chain: []
-date: 2025-01-23 00:00:00.000000000 Z
+date: 2025-01-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties