application.css is not created

[tcgumus]

Hello, I have a new app. Installed the tailwind with this gem. I did a assets:precompile. I see the components but not color. What am I missing? I can see that application.css has updated. But my application doesn't recognize new css. I clear cache but can't see any changes in colors. It changes the application.css in my assets folder but not in public folder. Thank you

edit:

I noticed rails didn't create app/assets/stylesheets/application.css file. I created the file and it build application.css in public folder. Problem solved for me but I think this is still an issue.

I found the similar error in the issue https://github.com/rails/rails/issues/43677. It looks like it has been resolved but not in my case. I did exactly same thing that @dhh did in the YouTube video.

[olingern]

Same problem for me as well. I created with: rails new app --javascript esbuild --css tailwind

edit: it looks like this is because application.tailwind.css exists instead

[jaykilleen]

I think I was just experiencing this exact problem. I am not sure on the exact cause/solution but these were the things that I noticed and what has worked for me. Note when debugging this I also switched to Propshaft instead of sprocket-rails.

When installing tailwind using cssbundling I am moving the tailwind.config.js from /config/ to the root of the project / I checked the source code of cssbundling and it doesn't actually put it in the /config/ directory... so not sure why mine was there ... I think maybe when tinkering with another library like importmaps it might have been moved there... anyway, worth checking.

It seems the standard install process means that my tailwind settings don't get picked up @tcgumus I think this step might explain why you are seeing some base level tailwind classes but not utilities or components... it is hard to say though as I don't full understand the whole process.

I also realised that I have moved away from the convention of naming the files application.css which might be due to this comment in jsbundling. https://github.com/rails/jsbundling-rails#why-does-esbuild-overwrite-my-applicationcss

In package.json I have the build:css outputting to tailwind.css.

"scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/tailwind.css"
  }

In app/assets/config/application.html.erb I am linking to the tailwind.css file.

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

In manifest.js add a reference to the tailwind.css file.

//= link tailwind.css

In config/initializers/assets.rb I am including tailwind.css in the precompilation.

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
Rails.application.config.assets.precompile += %w( tailwind.css )

I also rails assets:clobber to clear out my assets directory in case there is another .css from the old build process. Then run yarn build:css, rails assets:precompile restart the server and hope that it is fixed 🤞

[dhh]

When the npm version is too low, we output instructions during the setup on what you have to do instead: https://github.com/rails/cssbundling-rails/blob/main/lib/install/bootstrap/install.rb#L16-L21. I can see how that might be easy to miss, though. So feel free to explore ways to make it easier to diagnose with a PR 👍

[tcgumus]

I solved the case by deleting public css/js folders and avoiding asset compile. By this way, rails 7 directly using css files in app folder and I can be able to compile JIT and use tailwindcss as I want. Also, I don't really need an application.css in app folder. Rails automatically using css files under app/assets/stylesheets folder. So, no need to create application.css in anywhere. Just delete generated css,js files under public folder and run the application. That's how im working right now and faced no problems so far.