Rails 7.0.2.3 + Tailwind is not working, css style is not load

[ardifirmansyah8]

Hi, i tried to create new rails 7 project with --css tailwind command. But, when i tried to run the server using ./bin/dev, tailwind style is not load. What is i'm missing??

[philipithomas]

I'm having a similar issue - new project on tailwind-rails 2.0.8. Running rake assets:precompile is compiling and loading the CSS just fine. Running bin/rails tailwindcss:watch is succeeding and saying Rebuilding... Done in 283ms.. But, if I clean the built files - then Rails isn't loading the file from the build/ folder.

[philipithomas]

I found the solution for my problem - it was that config.assets.debug = true was not set in my development.rb file

[ardifirmansyah8]

Hi @philipithomas, i tried your solution, adding config.assets.debug = true in config/environments/development.rb, but still no luck. Do you using tailwindcss-rails (2.0.8-x86_64-darwin)?

[ardifirmansyah8]

Ah, i found the solution, when i'm creating the controller, i'm extend ActionController not ApplicationController, ex: class HomeController < ApplicationController.

[JesusGautamah]

i think the problem was the command, generate it with --css tailwindcss instead

[Swalden]

I ran into a similar issue with some classes not loading. Adding config.assets.debug = true fixed the issue.

is config.assets.debug = true required for tailwind CSS to function locally? If so should it be included in the readme?

[ktm72]

I was facing the same issue. Adding config.assets.debug = true hasn't done anything. Then, rake tailwindcss:build command in bash solved my issue.

[jmtame]

Thanks @Khondaker97 you saved me some time!

[JesusGautamah]

I was facing the same issue. Adding config.assets.debug = true hasn't done anything. Then, rake tailwindcss:build command in bash solved my issue.

What's about

tailwindcss:watch

and

rake assets:precompile

[therealrodk]

Adding config.assets.debug = true to development.rb fixed my issue, as well. Can anyone explain why this is necessary? I'm a little confused, especially since it was working properly and then suddenly stopped applying new styles I added.

[kokorolx]

config.assets.debug = true fixed my issue. Thank you

rails 7
ruby 3.2.2
MacOS: 13.2.1
Chipset: M1

[dhh]

I can't replicate these issues on Rails 7.0.5 with tailwind-rails 2.0.29. TW styles load as they should. There's no assets.debug = true necessary. Running using ./bin/dev.

[Bishoy-Samwel]

I have the same issue
with ruby '3.2.1'
rails ~> 7.0.4'

none of these is working:
config.assets.debug = true
rake tailwindcss:build

This suddenly happened after generating and using a new viewcomponent
I added './app/components/**/*.{erb,html}' it works well now ☺️

[Vlad0n1m]

Just run this in the background “rails tailwindcss:watch”

( open new terminal and run this, it will cause rebuilding every time your css changed)

[kimat]

I managed to get an existing application in such a state. This application uses rails (7.0.5.1), tailwindcss-rails (2.0.29)& is started with bin/dev. In this app, adding config.assets.debug = true to config/environments/development.rb fixes the issue as long as this extra config remains set.

I couldn't reproduce this on a freshly generated application with rails new tail --css tailwind.

Is there anything I could do to pinpoint how my app got into this state?

[ssdvr]

using ./bin/dev works. My mistake was using rails s

[americodls]

I had the problem described here (using bin/dev).

Updating config/environmentsdevelopment.rb with config.assets.debug = true or config.assets.digest = false solved the problem.

So I realized that might be a cache problem.
End up that rails assets:clean was the final solution for me. 🧹

No changes were necesary however I am not sure how my local env got in that weird state. 🤷

[jct808]

I had similiar issue like this, I tried everything which everyone said, it dosen't work ..
finially, I figure out what problem it is. I hope it is useful for you.
I fucked out my tailwind.config.js file.. that is my problem

const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { content: [ './public/*.html', './app/helpers/**/*.rb', './app/javascript/**/*.js', './app/views/**/*.{erb,haml,html,slim}', './config/initializers/simple_form_tailwind.rb' ], theme: { fontSize: { sm: '1rem', base: '1.25rem', }, extend: { fontFamily: { sans: ['Inter var', ...defaultTheme.fontFamily.sans], }, }, }, plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography'), require('@tailwindcss/container-queries'), ] }
when I remove
fontSize: { sm: '1rem', base: '1.25rem', }
everything works perfect..

[DogAndCode]

I found the solution for my problem - it was that config.assets.debug = true was not set in my development.rb file

This works for my too. Thanks legend

rails: 7.0.6
tailwind version: 3.3.3 installed with --css=tailwind

[dejan]

I also experienced this issue and figured out that for some reason my fresh Rails 7.0.6 app installed old tailwindcss-rails (2.0.16). Upgrading it solved the issue without having to set config.assets.debug = true.

bundle update tailwindcss-rails
...
Fetching tailwindcss-rails 2.0.30 (x86_64-linux) (was 2.0.16)
Installing tailwindcss-rails 2.0.30 (x86_64-linux) (was 2.0.16)

[tgaff]

While working on a slim viewcomponent I encountered this issue with:

tailwindcss-rails (2.0.30-x86_64-darwin)
slim-rails (3.6.2)
view_component (3.5.0)
rails (7.0.6)

(I believe these are all the most recent versions)

Very basic classes like h-6 just stopped working and had no CSS associated with them.

As others have noted, adding config.assets.debug in development.rb and a restart of rails s solved it. Additionally, simply rebooting my Mac also resolved it (without the debug setting).

[pgrennin]

rake tailwindcss:build is what solved it for me.

[S-Kantor]

Same issue. Tried to create 4 different projects. What ended up working was running rake css:build after rails new ... and tailwind worked for me.

[alejandrouda]

It seems like there might be different causes for this issue. For me, the following fixed it:

add the following line on assets.rb:

Rails.application.config.assets.paths << Rails.root.join("node_modules")

Then, run the following commands:

rails assets:precompile
rails tailwindcss:build

[ryansimms]

I had the issue where new styles I added to application.tailwind.css didn't seem to get picked up by tailwinds build process, I tried all the suggesting in this thread; rails assets:clean, rails tailwindcss:build, rails assets:clean, even adding [poll] to the end of css: bin/rails tailwindcss:watch in my Procfile.dev, nothing seemed to work.

I decided to try moving my styles outside of the @layer components { } block in application.tailwind.css and my new styles were now being picked up.

I have no idea why, or what caused it in the first place as it was working with this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components { 
  .my-custom-style {
    @apply bg-red-500;
  }
}

And now I have to do this:

@tailwind base;
@tailwind components;
@tailwind utilities;

.my-custom-style {
  @apply bg-red-500;
}

Hopefully someone can explain it, but thought I'd leave this here incase anyone else stumbles across this thread like I did.

[Eth3rnit3]

Don't forget to add stylesheet tag to application layout if you install Tailwind manually

<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

[nomasprime]

On latest versions of everything, styles still aren't compiling.

[snowdenMoses]

I had the problem described here (using bin/dev).

Updating config/environmentsdevelopment.rb with config.assets.debug = true or config.assets.digest = false solved the problem.

So I realized that might be a cache problem. End up that rails assets:clean was the final solution for me. 🧹

No changes were necesary however I am not sure how my local env got in that weird state. 🤷

This worked for me. Thank you

[indigotechtutorials]

using ruby 3.3 config.assets is deprecated and throws an error not sure what the new fix is?

[madipally]

I am not able to see anything instead of tooltip button in the view file i have added..

[n6ls0n]

I was having a similar issue where my styles were not loading even though I had added the gem with "bundle"

My config:
Rails 7.1.3.2
ruby 3.3.0,
tailwindcss-rails 2.3

This command solved it for me:
./bin/rails tailwindcss:install

In my case what happened was that I ran "bundle" but didn't actually install it. In case anyone else stumbles across this, try installing first.

[indigotechtutorials]

using ruby 3.3 config.assets is deprecated and throws an error not sure what the new fix is?

for me it was because I accidentally deleted Sprockets from my Gemfile and that was needed

[ashishra0]

I'm using tailwind with react on rails.

When running react on rails, it generates sample hello world js and erb files. After inspection, I found that the hello_world.html.erb file lacked the line <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> in the <head> section.

Adding this stylesheet code resolved my issue.

[anthonycorletti]

Had to manually set config.assets.debug = true in a rails app created with rails new app -a propshaft -c tailwind running 7.1.3.2 🤷 very weird. also running ruby 3.3.0 and tailwind 2.3.0

[santigolucass]

Manually setting config.assets.debug = true fixed the problem but caused my rebuild to about 4s agains 150ms without it.

rails assets:clean also didn't worked for me
but after running rails assets:precompile it started to work again, even without the config.assets.debug = true

I start my server with a Procfile that looks like this

web: bin/rails server -p $PORT
css: yarn build:css --watch
js: yarn build --reload

Which was inteended to watch any changes on my files and live reload the page, but after running precompile it was not live reloading the changes, then I deleted the generated folder from precompile, and now it is all working fine. Not sure if this was the best solution and not really sure the why this works, but it works for me.

My environment:

MacOS Sonoma 14.4
Apple M2 Pro
Ruby 3.3.0 (2023-12-25 revision 5124f9ac75) [arm64-darwin23]
Rails 7.1.3.2
tailwindcss: ^3.4.1
Start the server with bin/dev with the Procfile above.

[Luke-Littler]

I was facing the same issue. Adding config.assets.debug = true hasn't done anything. Then, rake tailwindcss:build command in bash solved my issue.

What's about

tailwindcss:watch

and

rake assets:precompile

rake assets:precompile solved it for me. Thanks.

[lorint]

Nothing is working for me -- have tried all of the above.

Repos that other people have created do work for me, just not if I start a new Rails project with --css tailwind and go from there.

[TareefAzizi]

did and it works now.
rake assets:precompile

[sk8higher]

Rails 7.1.3.2, after generating new app with --css=tailwind option encountered the same issue. Somehow Tailwind gem was not in the Gemfile, after running bundle add tailwindcss-rails && rails tailwindcss:install (maybe rails assets:precompile after) I was able to use Tailwind.

[joaomarceloods]

I found a solution here: https://discuss.rubyonrails.org/t/rails-7-tailwind-not-refreshing-css/79736/4

So I figured it out. I ran the command rake assets:precompile 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!

You can delete /public/assets manually or run:

rake assets:clobber

No need to set config.assets.debug = true. Run using ./bin/dev. rails 7.1.3.2 and tailwind-rails 2.6.0.

[joshe]

None of the above worked for me. Instead, it seems like the issue was related to the presence of either a space or parenthesis in my project's file path. More detail here: tailwindlabs/tailwindcss#10485

Once I removed spaces and parentheses from the file path, it worked.

[rapaccinim]

I found a solution here: https://discuss.rubyonrails.org/t/rails-7-tailwind-not-refreshing-css/79736/4

So I figured it out. I ran the command rake assets:precompile 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!

You can delete /public/assets manually or run:

rake assets:clobber

No need to set config.assets.debug = true. Run using ./bin/dev. rails 7.1.3.2 and tailwind-rails 2.6.0.

This was the solution for me, because for some reason I've previosuly run rake assets:precomile.

Deleting the /public/assets/ folder fixed the issue.

My environment:

• ruby 3.3.3
• rails 7.1.3
• tailwindcss-rails 2.6.1
• WSL 2 Linux version 5.15.153.1-microsoft-standard-WSL2

[dexterleng]

Running ./bin/rails tailwindcss:install worked for me. I used the --tailwindcss flag to create the project.

[audiosupp]

I was facing the same issue. Adding config.assets.debug = true hasn't done anything. Then, rake tailwindcss:build command in bash solved my issue.

Thank you!

[gwenleigh]

I ran into the same issue.

Like @ardifirmansyah8 (thank you so much!) commented all the way up top,
HomeController < ApplicationController did the magic for me.

I corrected my file as following:

# app/controllers/home_controller.rb
class HomeController < ActionController::Base  ----> class HomeController < ApplicationController
      ...

[slucaskim]

I had run into this issue, and it turns out it's because I had run rails assets:precompile in my local environment at some point. If you run that in development, you get this message:

$ rails assets:precompile

Rebuilding...

Done in 269ms.
Warning: You are precompiling assets in development. Rails will not serve any changed assets until you delete public/assets/.manifest.json

So if you try deleting that manifest file then restart your server styles should start loading.

[Serlle]

I had a similar issue but, with Rails 8 and "tailwindcss-rails", "~> 3.0", where not all Tailwind classes were loading properly. Initially, I tried several solutions, including:

1. Reconfiguring tailwind.config.js → No effect.
2. Upgrading Tailwind → Still didn’t work.
3. Reinstalling Tailwind → No changes.
4. Precompiling assets (bin/rails assets:precompile) → Didn’t fix the issue either.

For a while, I ignored the problem, but when I needed to use custom Tailwind classes, I realized they weren't being detected at all. That’s when I found this [Reddit post] mentioning bin/rails assets:clobber.

What do that command do?

"You can precompile the assets in app/assets using rake assets:precompile, and remove older compiled assets using rake assets:clean. The rake assets:clean task allows for rolling deploys that may still be linking to an old asset while the new assets are being built. If you want to clear public/assets completely, you can use rake assets:clobber." [Stackoverflow post]

My Fix

1. Running bin/rails assets:clobber temporarily fixed my issue.
2. However, after updating the template, Tailwind still wasn’t loading new styles automatically.
3. I checked my Procfile.dev, where I had:

   css: bin/rails tailwindcss:watch

   This should, in theory, have automatically rebuilt the CSS, so there was no need to add a command to run the assets:clobber within archive Procfile.dev, But still, that didn't work.
4. I checked the logs and REALIZED THAT MY RAILS SERVER WAS RUNNING ON A DIFFERENT PORT than expected.
5. Setting the port explicitly in Procfile.dev solved everything:

   web: bin/rails server -p 3000

Now, everything works fine without modifying development environment configuration.

Why did setting -p 3000 fix it?

By default, the Rails server runs on port 3000. However, if the server starts on a different port, the tailwindcss:watch process might not detect file changes correctly, leading to issues with CSS not updating as expected. Explicitly setting the server to run on port 3000 ensures that both the Rails server and the Tailwind watcher are aligned, allowing for proper detection of file changes and live CSS updates.

For more details, you can refer to the tailwindcss-rails README, which provides information on configuring the Tailwind watcher and ensuring it works seamlessly with your Rails server.

Takeaway

Always check the logs first! 😆 I spent so much time looking in the wrong places when the issue was simply the port. Hopefully, this helps someone else facing a similar problem!

[CarlosAwo]

I have the same issue with ruby '3.2.1' rails ~> 7.0.4'

none of these is working: config.assets.debug = true rake tailwindcss:build

This suddenly happened after generating and using a new viewcomponent I added './app/components/**/*.{erb,html}' it works well now ☺️

You will need to let tailwind scan files under components folder, allow it in tailwind config

[Set27]

Adding @config “../../../config/tailwind.config.js”; in ../tailwind/application.css

[henrycorredor]

Let me share my experience. Still with the same problem but I got a partial change, so someone can keep exploring.
I use Device and I wanted to edit the log in view. I noticed that the --watch wasn't working and I tried everything mentioned. Then I logged and the pages out of the Device controllers, and out of the views/device are working perfectly fine.