tailwindcss-rails 4.0.0.rc1 → 4.0.0.rc3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90c12e592470225fa2691b3d6a05f37a9e2ec42105914808503fb2ff8dcad26d
-  data.tar.gz: b8ed05daad38b1e5d444e642d2c6959a9bdeccf7b73dffb64cd6180298f9e9e0
+  metadata.gz: 9132c959c2d738315776b226dc5fe8292972e0e6a344e8d3f7c9294465910998
+  data.tar.gz: dd76376002a3a4ab5051b4affc63f57f0094fe3a95984d7b3c0ea3cd58f8161a
 SHA512:
-  metadata.gz: 503d686e869134450c4b7088881779bc63db162e2b75864c2ced185a4575a8d3425c8f7afb7929e892dbf1196e79cf163480e7e4d637a0a6467e03e26b9f256d
-  data.tar.gz: b44d09d37a35e990f020526880d4d227759b24f979c3443009d7dc5f2f0ffca03ad8a3ea686b6e969530f05e4e4bf96337812132ef58f5c7ff85657a94dfe85d
+  metadata.gz: 8de6d29182f7a5599944c65e6d2e86bc22fe8ebc3fa55a6eb7a2b6f71d5450a9349458c86343a6a47d184b96251acc2d1c078fd99890bfe74f32cbb3b9b5db8f
+  data.tar.gz: 6317cc4ea1fc599657af5cfee72ef1c04dd8a5caa8e6dd10a2e0c52b3ba6ce634dae5058abc86cfd2d4daa74677ebb020fc385d3b46a99007198b9343259f8bc

data/README.md

@@ -28,7 +28,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 +66,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 +93,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,56 +101,53 @@ 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)!
 
 
@@ -163,9 +167,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 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 `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 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 +263,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 +278,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 +343,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", before: "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.rc3"
 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.rc3
 platform: ruby
 authors:
 - David Heinemeier Hansson
 bindir: bin
 cert_chain: []
-date: 2025-01-23 00:00:00.000000000 Z
+date: 2025-01-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -45,22 +45,6 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/fonts/Inter-italic.alternates.var.woff2
-- app/assets/fonts/Inter-italic.cyrillic.var.woff2
-- app/assets/fonts/Inter-italic.extra.var.woff2
-- app/assets/fonts/Inter-italic.greek.var.woff2
-- app/assets/fonts/Inter-italic.latin-ext.var.woff2
-- app/assets/fonts/Inter-italic.latin.var.woff2
-- app/assets/fonts/Inter-italic.symbols.var.woff2
-- app/assets/fonts/Inter-italic.vietnamese.var.woff2
-- app/assets/fonts/Inter-roman.alternates.var.woff2
-- app/assets/fonts/Inter-roman.cyrillic.var.woff2
-- app/assets/fonts/Inter-roman.extra.var.woff2
-- app/assets/fonts/Inter-roman.greek.var.woff2
-- app/assets/fonts/Inter-roman.latin-ext.var.woff2
-- app/assets/fonts/Inter-roman.latin.var.woff2
-- app/assets/fonts/Inter-roman.symbols.var.woff2
-- app/assets/fonts/Inter-roman.vietnamese.var.woff2
 - lib/generators/tailwindcss/authentication/authentication_generator.rb
 - lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb
 - lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb