Upgrade tailwindcss-rails from 3.3.2 to 4.4.0 (Tailwind CSS v4)

Migrate from JS config to CSS-based configuration. Move input CSS from
app/assets/stylesheets/application.tailwind.css to
app/assets/tailwind/application.css with @import syntax. Remove
tailwind.config.js and inter-font stylesheet reference.

Author: andrzejkrzywda

apps/rails_application/Gemfile

@@ -8,7 +8,7 @@ gem "puma"
 gem "bootsnap", ">= 1.9.2", require: false
 gem "honeybadger"
 gem "skylight"
-gem "tailwindcss-rails", "~> 3.0"
+gem "tailwindcss-rails", "~> 4.0"
 gem "kaminari"
 gem "sprockets-rails"
 gem "turbo-rails"

apps/rails_application/Gemfile.lock

@@ -343,14 +343,16 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.2.0)
-    tailwindcss-rails (3.3.2)
+    tailwindcss-rails (4.4.0)
       railties (>= 7.0.0)
-      tailwindcss-ruby (~> 3.0)
-    tailwindcss-ruby (3.4.19-aarch64-linux)
-    tailwindcss-ruby (3.4.19-arm-linux)
-    tailwindcss-ruby (3.4.19-arm64-darwin)
-    tailwindcss-ruby (3.4.19-x86_64-darwin)
-    tailwindcss-ruby (3.4.19-x86_64-linux)
+      tailwindcss-ruby (~> 4.0)
+    tailwindcss-ruby (4.2.1)
+    tailwindcss-ruby (4.2.1-aarch64-linux-gnu)
+    tailwindcss-ruby (4.2.1-aarch64-linux-musl)
+    tailwindcss-ruby (4.2.1-arm64-darwin)
+    tailwindcss-ruby (4.2.1-x86_64-darwin)
+    tailwindcss-ruby (4.2.1-x86_64-linux-gnu)
+    tailwindcss-ruby (4.2.1-x86_64-linux-musl)
     thor (1.5.0)
     timeout (0.6.1)
     tsort (0.2.0)
@@ -407,7 +409,7 @@ DEPENDENCIES
   skylight
   sprockets-rails
   stimulus-rails
-  tailwindcss-rails (~> 3.0)
+  tailwindcss-rails (~> 4.0)
   turbo-rails
   tzinfo-data
 

apps/rails_application/Makefile

@@ -4,12 +4,11 @@ install: ## Installs dependencies, runs migrations, creates db & seeds if necess
 dev: ## Start development environment with web server and CSS watcher
 	@$(MAKE) -j 2 web css
 
-TAILWIND_SRC    := app/assets/stylesheets/application.tailwind.css
-TAILWIND_CONFIG := config/tailwind.config.js
+TAILWIND_SRC    := app/assets/tailwind/application.css
 TAILWIND_BUILD  := app/assets/builds
 TAILWIND_OUT    := $(TAILWIND_BUILD)/tailwind.css
 
-$(TAILWIND_OUT): $(TAILWIND_SRC) $(TAILWIND_CONFIG) | $(TAILWIND_BUILD)
+$(TAILWIND_OUT): $(TAILWIND_SRC) | $(TAILWIND_BUILD)
 	@echo "Building Tailwind CSS…"
 	@bin/rails tailwindcss:build
 

apps/rails_application/app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+
+@source "../../../app/helpers";
+@source "../../../app/views";
+@source "../../../app/read_models";
+@source "../../../public/*.html";
+
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/aspect-ratio";
+@plugin "@tailwindcss/typography";

apps/rails_application/app/assets/tailwind/application.css

@@ -6,7 +6,6 @@
     </title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", media: "all", "data-turbo-track": "reload" %>
     <%= render 'tracking' %>

apps/rails_application/app/views/layouts/application.html.erb

@@ -6,7 +6,6 @@
     </title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", media: "all", "data-turbo-track": "reload" %>
     <%= render 'tracking' %>