Skip to content

application.css is not created #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
tcgumus opened this issue Dec 22, 2021 · 4 comments
Closed

application.css is not created #56

tcgumus opened this issue Dec 22, 2021 · 4 comments

Comments

@tcgumus
Copy link

tcgumus commented Dec 22, 2021

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 rails/rails#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.

@tcgumus tcgumus changed the title I can't see colors application.css is not created Dec 28, 2021
@olingern
Copy link

olingern commented Jan 6, 2022

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

image

@jaykilleen
Copy link

jaykilleen commented Jan 14, 2022

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
Copy link
Member

dhh commented Jan 16, 2022

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
Copy link
Author

tcgumus commented Jan 30, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants