Update for Tailwind CSS v4 #164

justalever · 2025-01-24T20:34:26Z

This is a pull request based on #163

Tailwind CSS v4 has new configurations that are simpler than v3 and prior.

Summary of changes:

Removes tailwind.config.js file
Swaps legacy @tailwind directives for normal @import "tailwindcss" support.
Uses npx and @tailwindcss/cli to build css
Updates README

Let me know if you see any red flags!

Tailwind CSS v4 comes with new configurations and build scripts. This updates the installer for Tailwind to include those changes.

lib/install/tailwind/install.rb

gabrielso · 2025-01-27T09:30:48Z

lib/install/tailwind/package.json

@@ -2,6 +2,6 @@
  "name": "app",
  "private": "true",
  "scripts": {
-    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
+    "build:css": "npx @tailwindcss/cli -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"


Is it really necessary to run npx if you add @tailwindcss/cli as a depedency?
Also, would this also be a place to use bunx if using bun?

In my testing, something like npx or bunx is necessary to run the new @tailwindcss/cli package. The Tailwind docs have this, so I was going off that.

To be honest, I'm not sure this package.json file is necessary.

It is necessary because cssbundling-rails and jsbundling-rails are enhancing some rake tasks like precompile:assets to call this build and build:css task present in the package.json

@navidemad I mean the package.json file inside the lib/install/tailwind directory. I see no reference to it in rake tasks or elsewhere. I could be mistaken, of course.

What I meant is that by using npx directly in the script, you are assuming Node.js is installed, which is not true if you are, for instance, developing on a Dev Container with Bun instead of Node.js.

I see you added @tailwindcss/cli as a dependency... and the install process seems to generate the script using the correct command but it's not clear what this package.json file actually does.

but it's not clear what this package.json file actually does.

Correct, this legacy file was added prior to this pull request. I updated it to match the main one that gets copied. I'm not sure we need this file at all. I am in favor of removing it unless there are objections.

unless there are objections

Objection, your honor 🧑‍⚖️😅

If you are using importmaps, then package.json is indeed not needed (and thus it's not even included in the generated code of a new 'omakase' app).

But if you are using a JS bundler (-j bun|webpack|esbuild|rollup), you need package.json. That's where yarn keeps its dependencies, and even commands referenced in Procfile.dev.

So yeah, please don't drop it.

But if you are using a JS bundler (-j bun|webpack|esbuild|rollup), you need package.json. That's where yarn keeps its dependencies, and even commands referenced in Procfile.dev.

Thanks for chiming in! There's already one that gets copied at the root of the lib/install directory and is appended to via the tailwind installer task when running the installer. So I'm confused by the need for the additional package.json file inside lib/install/tailwind as referenced here.

akimthedream · 2025-02-03T21:22:56Z

Is there anything i can help with to advance with this PR? Is there anything missing? For me, all the changes are working. Hope to see rails new ... -css tailwind running smooth again soon 😊

- bundle add cssbundling-rails - bin/rails css:install:tailwind ref: rails/cssbundling-rails#164

richigonzalez · 2025-02-18T18:54:00Z

@justalever I applied these changes to a new rails 8 app (rails new test-tailwind --css=tailwind --javascript=esbuild), and while tailwind now works, it is trying to fetch http://localhost:3000/assets/tailwindcss, which of course fails:

Btw, thank you for this, @justalever, I had already spent about 10 hours trying to understand why it didn't work.

trinitytakei · 2025-02-22T19:39:21Z

README.md

@@ -12,8 +12,7 @@ This also happens in testing where the bundler attaches to the `test:prepare` ta

 That's it!

-You can configure your bundler options in the `build:css` script in `package.json` or via the installer-generated `tailwind.config.js` for Tailwind or `postcss.config.js` for PostCSS.
-
+You can configure your bundler options in the `build:css` script in `package.json` or `postcss.config.js` for PostCSS.


Is there even a postcss.config.js now? In my understanding, it was dropped in v4 (as a separate package) and merged into tailwind itself?

Yes, you can install postcss independently with cssbundling-rails (bin/rails css:install:postcss)

trinitytakei · 2025-02-22T19:48:26Z

lib/install/tailwind/application.tailwind.css

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";


It could be useful to open a separate PR just for this change, in case #164 takes a while to get merged.

This would be useful right away, regardless of how you install tailwind. Those installation woes can be worked around in various ways, but this one can't be - you just have to replace it every time, all the time.

The only question is: do we want to be backward compatible with 3.x? I don't think so (since all the generators I'm aware of are using tailwindcss@latest, which is 4.x now)

However, if backward compatibility is not a concern, I don't see why this couldn't be accepted right away as a separate PR.

justalever · 2025-02-22T19:53:39Z

@justalever I applied these changes to a new rails 8 app (rails new test-tailwind --css=tailwind --javascript=esbuild), and while tailwind now works, it is trying to fetch http://localhost:3000/assets/tailwindcss, which of course fails:

Btw, thank you for this, @justalever, I had already spent about 10 hours trying to understand why it didn't work.

This looks like something from the tailwindcss-rails gem, no? That writes to a different directory in the stylesheets folder as far as I'm aware.

=================== Command line flags: =================== -j esbuild -c tailwind ============ Ingredients: ============ * amazing print (https://alpha.railsnew.io/ingredients/276395358) Amazing print * Built-in Rails 8 Authentication (https://alpha.railsnew.io/ingredients/276395359) Generates Rails Authentication * Tailwindcss forms (https://alpha.railsnew.io/ingredients/276395360) Make TailwindCSS Forms nicer! * Tailwind 4.0 incompatibility fixes (https://alpha.railsnew.io/ingredients/276395361) At the time of writing, running this template is necessary to fix the way tailwindcss is imported. It will be dropped once this PR gets merged: rails/cssbundling-rails#164

* Tailwind 4.0 incompatibility fixes (https://alpha.railsnew.io/ingredients/276395361) At the time of writing, running this template is necessary to fix the way tailwindcss is imported. It will be dropped once this PR gets merged: rails/cssbundling-rails#164

jethrodaniel · 2025-04-01T20:42:33Z

@justalever I applied these changes to a new rails 8 app (rails new test-tailwind --css=tailwind --javascript=esbuild), and while tailwind now works, it is trying to fetch http://localhost:3000/assets/tailwindcss, which of course fails:

Btw, thank you for this, @justalever, I had already spent about 10 hours trying to understand why it didn't work.

@richigonzalez You can fix that issue like so:

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 9c6c431..542ca72 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -17,8 +17,7 @@
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/icon.png">
 
-    <%# Includes all stylesheet files in app/assets/stylesheets %>
-    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
   </head>

Update for Tailwind CSS v4

5d84462

Tailwind CSS v4 comes with new configurations and build scripts. This updates the installer for Tailwind to include those changes.

navidemad reviewed Jan 25, 2025

View reviewed changes

lib/install/tailwind/install.rb Outdated Show resolved Hide resolved

Add support for either bunx or npx

a0df0b7

gabrielso reviewed Jan 27, 2025

View reviewed changes

tagliala mentioned this pull request Jan 29, 2025

Feature: Tailwind 4 compatibility activeadmin/activeadmin#8615

Closed

1 task

saboyutaka added a commit to shunjuio/gql-chat that referenced this pull request Feb 13, 2025

tailwindcss v4 をinstall

b2eeda7

- bundle add cssbundling-rails - bin/rails css:install:tailwind ref: rails/cssbundling-rails#164

This was referenced Feb 13, 2025

Revert "tailwindcssをinstall" shunjuio/gql-chat#6

Merged

tailwindcss v4 をinstall shunjuio/gql-chat#8

Merged

trinitytakei reviewed Feb 22, 2025

View reviewed changes

skipkayhil mentioned this pull request Feb 23, 2025

Pin tailwindcss to v3 to fix rails new #168

Closed

dhh merged commit df70d23 into rails:main Feb 24, 2025

Update for Tailwind CSS v4 #164

Update for Tailwind CSS v4 #164

Uh oh!

Conversation

justalever commented Jan 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

gabrielso Jan 27, 2025

Choose a reason for hiding this comment

Uh oh!

justalever Jan 27, 2025

Choose a reason for hiding this comment

Uh oh!

navidemad Jan 27, 2025

Choose a reason for hiding this comment

Uh oh!

justalever Jan 27, 2025

Choose a reason for hiding this comment

Uh oh!

gabrielso Feb 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justalever Feb 13, 2025

Choose a reason for hiding this comment

Uh oh!

trinitytakei Feb 22, 2025

Choose a reason for hiding this comment

Uh oh!

justalever Feb 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akimthedream commented Feb 3, 2025

Uh oh!

richigonzalez commented Feb 18, 2025

Uh oh!

trinitytakei Feb 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justalever Feb 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

trinitytakei Feb 22, 2025

Choose a reason for hiding this comment

Uh oh!

justalever commented Feb 22, 2025

Uh oh!

jethrodaniel commented Apr 1, 2025

Uh oh!

Uh oh!

justalever commented Jan 24, 2025 •

edited

Loading

gabrielso Feb 11, 2025 •

edited

Loading

justalever Feb 22, 2025 •

edited

Loading

trinitytakei Feb 22, 2025 •

edited

Loading

justalever Feb 22, 2025 •

edited

Loading