Tailwind live rebuild doesn't work on new application when modifying a view

[sarrietav-dev]

Hello, team,

I’m experiencing an issue with live rebuild not functioning correctly in a new Rails application when modifying a view. Here's how to replicate the issue:

Steps to reproduce:

1. Create a new Rails project with Tailwind:

   rails new my_project -c tailwind

2. Generate a Post model:

   rails g model post name:string

3. Generate a PostsController:

   rails g controller posts_controller index

4. Run database migrations:

   rails db:migrate

5. Start the Rails server:

   ./bin/dev

6. Visit the /posts/index route in the browser.
7. Modify the app/views/posts/index.html.erb file by adding a new class to a tag.
8. The browser does not reload, nor does the Tailwind process create a new output file.

Additional information:

• I found this issue to be related to Rails 7.0.2.3 + Tailwind is not working, css style is not load #160, but no solution for this specific problem has been found in that discussion.
• I am using Ubuntu 24.10.

I would appreciate any suggestions or workarounds for this issue.

Thank you!

[patriciomacadden]

Hi @sarrietav-dev, does your Procfile.dev has a line with css: bin/rails tailwindcss:watch? If that's the case, you should be seeing something like:

≈ tailwindcss v4.0.14
Done in 462ms

if there are no errors, of course. The first line indicates which version of tailwindcss you're running (I'm asuming latest, but can you clarify?), and the second one that it built the output file.

Then, every time you change a source file, you should be seeing a Done in ...ms line again, indicating that it rebuilt the output file again.

Could you indicate which versions of rails and tailwindcss-rails are you using?

Also can you tell if that process is running without errors?

8. The browser does not reload, nor does the Tailwind process create a new output file.

Regarding this, this gem doesn't provide live-reloading of your browser. If that's what you're after, you should be looking at hotwired/spark.

[sarrietav-dev]

Hello @patriciomacadden

I'm using the latest version of tailwindcss-rails (4.2.1).

Yes, the Procfile.dev looks like this:

web: bin/rails server
css: bin/rails tailwindcss:watch

And I only get this line just once on the logs:

08:23:29 css.1  | started with pid 9205

08:26:19 css.1  | ≈ tailwindcss v4.0.15
08:26:19 css.1  |
08:26:19 css.1  | Done in 78ms

I also tried to use hotwired-spark, the page refreshes automatically without the new styles.

I think the issue is that the tailwind process only builds the output stylesheet once but doesn't watch for new changes.

[flavorjones]

@sarrietav-dev We need more information in order to be able to diagnose what you're seeing. I cannot reproduce what you're describing, following the steps you have run above. In particular, I see the following lines emitted by the bin/dev process each time I save index.html.erb:

13:19:00 css.1  | Done in 1ms
13:22:23 css.1  | Done in 10ms
13:22:27 css.1  | Done in 8ms

Then, when I refresh the web page in the browser, I see the updated style. It's all working for me. What are you seeing emitted from the bin/dev process as you edit? Do you see errors? Do you see an "exiting" message of some kind?

What's your setup? I'm running on a Linux x86_64 machine, I'm not using docker, and I'm using tailwindcss-rails 4.2.1 and tailwindcss-ruby 4.0.16.

In particular, are you running in a Docker container or running on Windows with WSL?

[sarrietav-dev]

@flavorjones I'm using a Linux x86_64 laptop running Ubuntu 24.04. My Gemfile.lock says that I'm using tailwindcss-rails 4.2.1 and tailwindcss-ruby 4.0.16. I'm using ruby 3.3.5 through rbenv 1.3.2 and node 22.14.0. No Docker. Below there's the code that I used and a video of the issue.

sarrietav-dev/tw-rails-issue-rep

Screencast.From.2025-03-25.17-38-07.webm

[sarrietav-dev]

Hi @flavorjones @patriciomacadden, I tested the code on a Github Codespace and it worked as intended. I guess the issue is my machine.

[flavorjones]

@sarrietav-dev Thanks for letting us know. I poked around in the upstream issues and learned that the tailwind CLI uses https://github.com/parcel-bundler/watcher for watching for file changes. Perhaps there's something mentioned in that project's code or docs that might help you?

In them meantime, since I don't believe there's anything we can easily do in this project, or in tailwindcss-ruby, to help, I'm going to convert this to a discussion.