Rails 7 + Tailwind not refreshing css

rubyonrails-talk
1

I wanted to test the new integration of Tailwind CSS with Rails 7, just wrote a bit of code to see how this works… Normally, whenever the views are modified, the bundler should regenerate the CSS… but it does not. I need to stop the server (./bin/dev) and restart the server to see my changes. Any idea why?

To reproduce it

rails new tailwind --force --javascript=esbuild --css=tailwind
cd tailwind/
rails db:create
rails db:migrate
rails g controller demo show
./bin/dev
  1. Access localhost:3000/demo/show
  2. Then just modify the view demo/show.html.erb to use Tailwind css e.g.
<button class="bg-sky-500 hover:bg-sky-700 px-5 py-2 text-sm leading-5 rounded-full font-semibold text-white">
  Save changes
</button>
  1. Reload localhost:3000/demo/show

And you won’t see any tailwind style applied to the button without stoping/restarting the server.

1 Like
2

Me too,
Rails 7.0.2.3, ruby 3.1.0p0 [x86_64-linux] and executing

rails tailwindcss:build

Later changes not refreshing after restarting apache webserver in any browser also gem “hotwire-livereload” isn’t working for his.

1 Like
3

I’m in the same boat. Any updates on how you resolved this @coopeu , @Cedric_Lefebvre ?

4

So I figured it out. I ran the command rake assets:precomile locally for some reason. Likely was just following some guide to setup things. This created a bunch of files in my “/public/assets” folder. After I deleted all the files in that folder things went back to normal. Hope this saves someone else!

6 Likes
5

@daveomcd Saved my life, thanks a lot!

6

Tried running “rails --tasks” and saw that there is a command to watch tailwind compilation. Just run this in the background “rails tailwindcss:watch”

7

Thank you this really helped

8

I guess running ./bin/dev should do this for you so you don’t have to open multiple terminal for each command.

9

Currently, I’m doing each tailwind update this alias rtbap=“rails tailwindcss:build & rails assets:precompile” if not you don’t see any new simple added text-teal-600 class in a html.erb file The initial size of builds/tailwind.css 15Kb is passing quickly to +100Kb for a small website app.