tailwindcss-rails 3.3.2 → 4.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ee1e391824b503c8e61b8a2febd7ccd47d31614bfefd933e272a70e6b02f7e9a
-  data.tar.gz: 0b19a09424bdf6f2b8a74bc0cff3867373bd1a6c04c20ecb83ccdb1e2528d8eb
+  metadata.gz: 90c12e592470225fa2691b3d6a05f37a9e2ec42105914808503fb2ff8dcad26d
+  data.tar.gz: b8ed05daad38b1e5d444e642d2c6959a9bdeccf7b73dffb64cd6180298f9e9e0
 SHA512:
-  metadata.gz: ce439d9897933e3c38d64a1bf6459d47cbe9ebf7daa0c79dac66dd1e7e62012eb0602dc0adb2bf239a37c9d2709e429a8912d1918768a777abb9bc5454354e36
-  data.tar.gz: 14b70eee495bc67c4f465c041345d48acc5d985a3a06b2fead4bea4f90e5c521eb2aa854fa4f67b3df244aa4d63239bbd27ae1d9edab28a2790d322f3eb75023
+  metadata.gz: 503d686e869134450c4b7088881779bc63db162e2b75864c2ced185a4575a8d3425c8f7afb7929e892dbf1196e79cf163480e7e4d637a0a6467e03e26b9f256d
+  data.tar.gz: b44d09d37a35e990f020526880d4d227759b24f979c3443009d7dc5f2f0ffca03ad8a3ea686b6e969530f05e4e4bf96337812132ef58f5c7ff85657a94dfe85d

data/README.md

@@ -9,6 +9,10 @@
 - [Installation](#installation)
   * [Choosing a specific version of `tailwindcss`](#choosing-a-specific-version-of-tailwindcss)
   * [Using a local installation of `tailwindcss`](#using-a-local-installation-of-tailwindcss)
+- [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)
+  * [Troubleshooting](#troubleshooting)
 - [Developing with Tailwindcss](#developing-with-tailwindcss)
   * [Configuration and commands](#configuration-and-commands)
   * [Building for production](#building-for-production)
@@ -17,7 +21,7 @@
   * [Live rebuild](#live-rebuild)
   * [Using with PostCSS](#using-with-postcss)
   * [Custom inputs or outputs](#custom-inputs-or-outputs)
-- [Troubleshooting](#troubleshooting)
+- [Troubleshooting](#troubleshooting-1)
   * [Lost keystrokes or hanging when using terminal-based debugging tools (e.g. IRB, Pry, `ruby/debug`...etc.) with the Puma plugin](#lost-keystrokes-or-hanging-when-using-terminal-based-debugging-tools-eg-irb-pry-rubydebugetc-with-the-puma-plugin)
   * [Running in a docker container exits prematurely](#running-in-a-docker-container-exits-prematurely)
   * [Conflict with sassc-rails](#conflict-with-sassc-rails)
@@ -55,21 +59,117 @@ gem "tailwindcss-ruby", "3.4.13"
 You can also use a local (npm-based) installation if you prefer, please go to https://github.com/flavorjones/tailwindcss-ruby for more information.
 
 
-## Developing with Tailwindcss
+## Upgrading your application from Tailwind v3 to v4
 
-### Configuration and commands
+v4.x of this gem has been updated to work with Tailwind v4, including providing some help with upgrading your application.
+
+A full explanation of a Tailwind v4 upgrade is out of scope for this README, so we strongly urge you to read the [official Tailwind v4 upgrade guide](https://tailwindcss.com/docs/upgrade-guide) before embarking on an upgrade to an existing large app.
+
+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`:
+
+``` ruby
+# Gemfile
+gem "tailwindcss-rails", "~> 3.3"
+gem "tailwindcss-ruby", "~> 3.4"
+```
+
+
+### Upgrade steps
+
+First, update to `tailwindcss-rails` v4.0.0 or higher. This will also ensure you're transitively depending on `tailwindcss-ruby` v4.
+
+``` html
+# Gemfile
+gem "tailwindcss-rails", "~> 4.0"
+```
+
+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`.
+- 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.
+
+Here's what that upgrade looks like on a vanilla Rails app:
+
+``` 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
+  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`
+
+│ Migrating JavaScript configuration files…
 
-#### Configuration file: `config/tailwind.config.js`
+│ ↳ 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.
 
-You can customize the Tailwind build through the `config/tailwind.config.js` file, just like you would if Tailwind was running in a traditional node installation. All the first-party plugins are supported.
+│ Migrating templates…
+
+│ ↳ Migrated templates for configuration file: `./config/tailwind.config.js`
+
+│ Migrating stylesheets…
+
+│ ↳ Migrated stylesheet: `./app/assets/stylesheets/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
+         run  bundle install --quiet
+```
+
+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)!
+
+
+### 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.
+
+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.
+
+
+## Developing with Tailwindcss
+
+### Configuration and commands
 
 #### Input file: `app/assets/stylesheets/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 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.
 
 #### Output file: `app/assets/builds/tailwind.css`
 
-When you run `rails tailwindcss:build`, the input file will be used to generate the output in `app/assets/builds/tailwind.css`. That's the output CSS that you'll include in your app (the installer automatically configures this, alongside the Inter font as well).
+When you run `rails tailwindcss:build`, the input file will be used to generate the output in `app/assets/builds/tailwind.css`. That's the output CSS that you'll include in your app.
 
 #### Commands
 
@@ -151,12 +251,12 @@ Running `bin/dev` invokes Foreman to start both the Tailwind watch process and t
 
 ### Using with PostCSS
 
-If you want to use PostCSS as a preprocessor, create a custom `config/postcss.config.js` and that file will be loaded by tailwind automatically.
+If you want to use PostCSS as a preprocessor, create a custom `postcss.config.js` in your project root directory, and that file will be loaded by tailwind automatically.
 
 For example, to enable nesting:
 
 ```js
-// config/postcss.config.js
+// postcss.config.js
 module.exports = {
   plugins: {
     'postcss-import': {},

data/lib/generators/tailwindcss/authentication/templates/app/views/passwords/edit.html.erb

@@ -7,11 +7,11 @@
 
   <%%= form_with url: password_path(params[:token]), method: :put, class: "contents" do |form| %>
     <div class="my-5">
-      <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
     </div>
 
     <div class="my-5">
-      <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
     </div>
 
     <div class="inline">

data/lib/generators/tailwindcss/authentication/templates/app/views/passwords/new.html.erb

@@ -7,7 +7,7 @@
 
   <%%= form_with url: passwords_path, class: "contents" do |form| %>
     <div class="my-5">
-      <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow rounded-md border border-gray-400 outline-none focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow-sm rounded-md border border-gray-400 outline-hidden focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
     </div>
 
     <div class="inline">

data/lib/generators/tailwindcss/authentication/templates/app/views/sessions/new.html.erb

@@ -11,11 +11,11 @@
 
   <%%= form_with url: session_url, class: "contents" do |form| %>
     <div class="my-5">
-      <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.email_field :email_address, required: true, autofocus: true, autocomplete: "username", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow-sm rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
     </div>
 
     <div class="my-5">
-      <%%= form.password_field :password, required: true, autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
+      <%%= form.password_field :password, required: true, autocomplete: "current-password", placeholder: "Enter your password", maxlength: 72, class: "block shadow-sm rounded-md border border-gray-400 focus:outline-blue-600 px-3 py-2 mt-2 w-full" %>
     </div>
 
     <div class="col-span-6 sm:flex sm:items-center sm:gap-4">

data/lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt

@@ -15,23 +15,23 @@
   <div class="my-5">
 <% if attribute.password_digest? -%>
     <%%= form.label :password %>
-    <%%= form.password_field :password, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
+    <%%= form.password_field :password, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
   </div>
 
   <div class="my-5">
     <%%= form.label :password_confirmation %>
-    <%%= form.password_field :password_confirmation, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password_confirmation].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password_confirmation].any?}] %>
+    <%%= form.password_field :password_confirmation, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password_confirmation].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password_confirmation].any?}] %>
 <% elsif attribute.attachments? -%>
     <%%= form.label :<%= attribute.column_name %> %>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:password].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:password].any?}] %>
 <% else -%>
     <%%= form.label :<%= attribute.column_name %> %>
 <% if attribute.field_type == :textarea || attribute.field_type == :text_area -%>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
 <% elsif attribute.field_type == :checkbox || attribute.field_type == :check_box -%>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow rounded-md border outline-none mt-2 h-5 w-5", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow-sm rounded-md border outline-hidden mt-2 h-5 w-5", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
 <% else -%>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: ["block shadow-sm rounded-md border outline-hidden px-3 py-2 mt-2 w-full", {"border-gray-400 focus:outline-blue-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].none?, "border-red-400 focus:outline-red-600": <%= model_resource_name %>.errors[:<%= attribute.column_name %>].any?}] %>
 <% end -%>
 <% end -%>
   </div>

data/lib/install/application.tailwind.css

@@ -1,13 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/*
-
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
-}
-
-*/
+@import "tailwindcss";

data/lib/install/{tailwindcss.rb → install_tailwindcss.rb}

@@ -4,7 +4,7 @@ CENTERING_CONTAINER_INSERTION_POINT = /^\s*<%= yield %>/.freeze
 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", "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
   ERB
 
   if File.open(APPLICATION_LAYOUT_PATH).read =~ /<body>\n\s*<%= yield %>\n\s*<\/body>/
@@ -13,7 +13,7 @@ if APPLICATION_LAYOUT_PATH.exist?
   end
 else
   say "Default application.html.erb is missing!", :red
-  say %(        Add <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
+  say %(        Add <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.)
 end
 
 say "Build into app/assets/builds"
@@ -28,11 +28,6 @@ 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("config/tailwind.config.js").exist?
-  say "Add default config/tailwindcss.config.js"
-  copy_file "#{__dir__}/tailwind.config.js", "config/tailwind.config.js"
-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"

data/lib/install/upgrade_tailwindcss.rb

@@ -0,0 +1,48 @@
+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")
+
+unless TAILWIND_CONFIG_PATH.exist?
+  say "Default tailwind.config.js is missing!", :red
+  abort
+end
+
+if File.read(TAILWIND_CONFIG_PATH).match?(/defaultTheme/)
+  say "Removing references to 'defaultTheme' from #{TAILWIND_CONFIG_PATH}"
+  gsub_file TAILWIND_CONFIG_PATH.to_s, /^(.*defaultTheme)/, "// \\1"
+end
+
+if POSTCSS_CONFIG_PATH.exist?
+  say "Moving PostCSS configuration to application root directory"
+  FileUtils.mv(POSTCSS_CONFIG_PATH, Rails.root, verbose: true) || abort
+end
+
+if system("npx --version")
+  say "Running the upstream Tailwind CSS upgrader"
+  command = Shellwords.join(["npx", "@tailwindcss/upgrade@next", "--force", "--config", TAILWIND_CONFIG_PATH.to_s])
+  success = run(command, abort_on_failure: false)
+  unless success
+    say "The upgrade tool failed!", :red
+    say %(        You probably need to update your configuration. Please read the error messages,)
+    say %(        and check the Tailwind CSS upgrade guide at https://tailwindcss.com/docs/upgrade-guide.)
+    abort
+  end
+else
+  say "Could not run the Tailwind upgrade tool. Please see https://tailwindcss.com/docs/upgrade-guide for manual instructions.", :red
+  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/puma/plugin/tailwindcss.rb

@@ -13,7 +13,7 @@ Puma::Plugin.create do
       # If we use system(*command) instead, IRB and Debug can't read from $stdin
       # correctly bacause some keystrokes will be taken by watch_command.
       begin
-        IO.popen(Tailwindcss::Commands::ENV, Tailwindcss::Commands.watch_command, 'r+') do |io|
+        IO.popen(Tailwindcss::Commands.watch_command, 'r+') do |io|
           IO.copy_stream(io, $stdout)
         end
       rescue Interrupt

data/lib/tailwindcss/commands.rb

@@ -2,8 +2,6 @@ require "tailwindcss/ruby"
 
 module Tailwindcss
   module Commands
-    ENV = {'BROWSERSLIST_IGNORE_OLD_DATA' => '1'}
-
     class << self
       def compile_command(debug: false, **kwargs)
         rails_root = defined?(Rails) ? Rails.root : Pathname.new(Dir.pwd)
@@ -12,7 +10,6 @@ module Tailwindcss
           Tailwindcss::Ruby.executable(**kwargs),
           "-i", rails_root.join("app/assets/stylesheets/application.tailwind.css").to_s,
           "-o", rails_root.join("app/assets/builds/tailwind.css").to_s,
-          "-c", rails_root.join("config/tailwind.config.js").to_s,
         ]
 
         command << "--minify" unless (debug || rails_css_compressor?)

data/lib/tailwindcss/engine.rb

@@ -2,10 +2,6 @@ require "rails"
 
 module Tailwindcss
   class Engine < ::Rails::Engine
-    initializer "tailwindcss.assets" do
-      Rails.application.config.assets.precompile += %w( inter-font.css )
-    end
-
     initializer "tailwindcss.disable_generator_stylesheets" do
       Rails.application.config.generators.stylesheets = false
     end

data/lib/tailwindcss/version.rb

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

data/lib/tasks/build.rake

@@ -4,7 +4,7 @@ namespace :tailwindcss do
     debug = args.extras.include?("debug")
     command = Tailwindcss::Commands.compile_command(debug: debug)
     puts command.inspect if args.extras.include?("verbose")
-    system(Tailwindcss::Commands::ENV, *command, exception: true)
+    system(*command, exception: true)
   end
 
   desc "Watch and build your Tailwind CSS on file changes"
@@ -14,7 +14,7 @@ namespace :tailwindcss do
     always = args.extras.include?("always")
     command = Tailwindcss::Commands.watch_command(always: always, debug: debug, poll: poll)
     puts command.inspect if args.extras.include?("verbose")
-    system(Tailwindcss::Commands::ENV, *command)
+    system(*command)
   rescue Interrupt
     puts "Received interrupt, exiting tailwindcss:watch" if args.extras.include?("verbose")
   end

data/lib/tasks/install.rake

@@ -1,6 +1,6 @@
 namespace :tailwindcss do
   desc "Install Tailwind CSS into the app"
   task :install do
-    system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/tailwindcss.rb", __dir__)}"
+    system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/install_tailwindcss.rb", __dir__)}"
   end
 end

data/lib/tasks/upgrade.rake

@@ -0,0 +1,6 @@
+namespace :tailwindcss do
+  desc "Upgrade app from Tailwind CSS v3 to v4"
+  task :upgrade do
+    system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/upgrade_tailwindcss.rb", __dir__)}"
+  end
+end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: tailwindcss-rails
 version: !ruby/object:Gem::Version
-  version: 3.3.2
+  version: 4.0.0.rc1
 platform: ruby
 authors:
 - David Heinemeier Hansson
 bindir: bin
 cert_chain: []
-date: 1980-01-02 00:00:00.000000000 Z
+date: 2025-01-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -29,14 +29,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '4.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.0'
+        version: '4.0'
 email: david@loudthinking.com
 executables: []
 extensions: []
@@ -61,7 +61,6 @@ files:
 - app/assets/fonts/Inter-roman.latin.var.woff2
 - app/assets/fonts/Inter-roman.symbols.var.woff2
 - app/assets/fonts/Inter-roman.vietnamese.var.woff2
-- app/assets/stylesheets/inter-font.css
 - 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
@@ -83,8 +82,8 @@ files:
 - lib/install/Procfile.dev
 - lib/install/application.tailwind.css
 - lib/install/dev
-- lib/install/tailwind.config.js
-- lib/install/tailwindcss.rb
+- lib/install/install_tailwindcss.rb
+- lib/install/upgrade_tailwindcss.rb
 - lib/puma/plugin/tailwindcss.rb
 - lib/tailwindcss-rails.rb
 - lib/tailwindcss/commands.rb
@@ -94,6 +93,7 @@ files:
 - lib/tasks/build.rake
 - lib/tasks/clobber.rake
 - lib/tasks/install.rake
+- lib/tasks/upgrade.rake
 homepage: https://github.com/rails/tailwindcss-rails
 licenses:
 - MIT
@@ -114,7 +114,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 3.2.0
 requirements: []
-rubygems_version: 3.6.8
+rubygems_version: 3.6.2
 specification_version: 4
 summary: Integrate Tailwind CSS with the asset pipeline in Rails.
 test_files: []

data/app/assets/stylesheets/inter-font.css

@@ -1,194 +0,0 @@
-/*
- *= link_directory ../fonts
- */
-
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.extra.var.woff2') format('woff2');
-  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
-  font-named-instance: 'Italic';
-}
-/* alternates */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.alternates.var.woff2') format('woff2');
-  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
-  font-named-instance: 'Italic';
-}
-/* symbols */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.symbols.var.woff2') format('woff2');
-  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
-  font-named-instance: 'Italic';
-}
-
-/* extra */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.extra.var.woff2') format('woff2');
-  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
-  font-named-instance: 'Italic';
-}
-/* alternates */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.alternates.var.woff2') format('woff2');
-  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
-  font-named-instance: 'Italic';
-}
-/* symbols */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.symbols.var.woff2') format('woff2');
-  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
-  font-named-instance: 'Italic';
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.cyrillic.var.woff2') format('woff2');
-  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
-  font-named-instance: 'Italic';
-}
-/* greek */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.greek.var.woff2') format('woff2');
-  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
-  font-named-instance: 'Italic';
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.vietnamese.var.woff2') format('woff2');
-  unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
-  font-named-instance: 'Italic';
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.latin-ext.var.woff2') format('woff2');
-  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
-  font-named-instance: 'Italic';
-}
-/* latin */
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-italic.latin.var.woff2') format('woff2');
-  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
-  font-named-instance: 'Italic';
-}
-/* extra */
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-roman.extra.var.woff2') format('woff2');
-  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
-  font-named-instance: 'Regular';
-}
-/* alternates */
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-roman.alternates.var.woff2') format('woff2');
-  unicode-range: U+E000,U+E002-E081,U+E093-E097,U+E0A5-E0E7,U+E0F3-E11D,U+E11E-E165,U+EE01,U+F6C3;
-  font-named-instance: 'Regular';
-}
-/* symbols */
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-roman.symbols.var.woff2') format('woff2');
-  unicode-range: U+20DD-20DF,U+2190-219A,U+21A9-21AB,U+21B0-21B2,U+21B3-21B6,U+21BA-21BC,U+21D0,U+21D2,U+21D4,U+21DE-21E0,U+21E4-21E6,U+21E7,U+21EA,U+2303,U+2305,U+2318,U+2325-2328,U+232B,U+2380,U+2387,U+238B,U+23CE-23D0,U+2460-2469,U+24B6-24D0,U+24EA,U+25A0-25A3,U+25B2-25B4,U+25B6-25B8,U+25BA-25BE,U+25C0-25C2,U+25C4-25C8,U+25CB,U+25CF,U+25EF,U+2600,U+2605-2607,U+263C,U+2661,U+2665,U+26A0,U+2713,U+2717,U+2756,U+2764,U+2780-2789,U+27F5-27FB,U+2B06,U+2B12-2B14,U+2B1C,U+E000,U+E12B-E164,U+1F130-1F14A,U+1F850,U+1F852;
-  font-named-instance: 'Regular';
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-roman.cyrillic.var.woff2') format('woff2');
-  unicode-range: U+0400-049E,U+04A0-0500,U+052F,U+20B4,U+2116,U+2DFF,U+A69F;
-  font-named-instance: 'Regular';
-}
-/* greek */
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-roman.greek.var.woff2') format('woff2');
-  unicode-range: U+0370-0378,U+037A-0380,U+0384-038B,U+038C,U+038E-03A2,U+03A3-03E2,U+03F0-0400,U+1F00-1F16,U+1F18-1F1E,U+1F20-1F46,U+1F48-1F4E,U+1F50-1F58,U+1F59,U+1F5B,U+1F5D,U+1F5F-1F7E,U+1F80-1FB5,U+1FB6-1FC5,U+1FC6-1FD4,U+1FD6-1FDC,U+1FDD-1FF0,U+1FF2-1FF5,U+1FF6-1FFF;
-  font-named-instance: 'Regular';
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-roman.vietnamese.var.woff2') format('woff2');
-  unicode-range: U+0102-0104,U+0110-0112,U+0128-012A,U+0168-016A,U+01A0-01A2,U+01AF-01B1,U+1EA0-1EFA,U+20AB;
-  font-named-instance: 'Regular';
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-roman.latin-ext.var.woff2') format('woff2');
-  unicode-range: U+0100-0149,U+014A-01C4,U+01C5-0250,U+0259,U+1E00-1F00,U+2020,U+20A0-20AC,U+20AD-20C0,U+2113,U+2C7C,U+2C7F,U+A7FF;
-  font-named-instance: 'Regular';
-}
-/* latin */
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('Inter-roman.latin.var.woff2') format('woff2');
-  unicode-range: U+0000-007F,U+00A0-0100,U+0131,U+0152-0154,U+02BB-02BD,U+02C6,U+02DA,U+02DC,U+2000-200C,U+2010-2028,U+202F-2060,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
-  font-named-instance: 'Regular';
-}

data/lib/install/tailwind.config.js

@@ -1,22 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
-module.exports = {
-  content: [
-    './public/*.html',
-    './app/helpers/**/*.rb',
-    './app/javascript/**/*.js',
-    './app/views/**/*.{erb,haml,html,slim}'
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
-      },
-    },
-  },
-  plugins: [
-    // require('@tailwindcss/forms'),
-    // require('@tailwindcss/typography'),
-    // require('@tailwindcss/container-queries'),
-  ]
-}