'tailwind.css not being generated in a Rails 7 project in Heroku

I have a Rails 7 project using TailwindCSS deployed to Heroku that is not building tailwind.css during rake asset:precompile and I don't know why. When I try to access the application, it crashes with this error:

I, [2022-03-23T17:35:18.429029 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Started GET "/" for XX.XX.XX.XX at 2022-03-23 17:35:18 +0000
I, [2022-03-23T17:35:18.433526 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Processing by StaticController#index as HTML
I, [2022-03-23T17:35:18.439133 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292]   Rendered static/index.html.erb within layouts/application (Duration: 0.6ms | Allocations: 184)
I, [2022-03-23T17:35:18.446294 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292]   Rendered layout layouts/application.html.erb (Duration: 7.8ms | Allocations: 1205)
I, [2022-03-23T17:35:18.446595 #8]  INFO -- : [4f6eaac8-942c-4ee5-af10-172663b1a292] Completed 500 Internal Server Error in 13ms (Allocations: 2512)
F, [2022-03-23T17:35:18.447716 #8] FATAL -- : [4f6eaac8-942c-4ee5-af10-172663b1a292]
[4f6eaac8-942c-4ee5-af10-172663b1a292] ActionView::Template::Error (The asset "tailwind.css" is not present in the asset pipeline.
):
[4f6eaac8-942c-4ee5-af10-172663b1a292]     12:     <meta name="theme-color" content="#ffffff">
[4f6eaac8-942c-4ee5-af10-172663b1a292]     13:     <%= csrf_meta_tags %>
[4f6eaac8-942c-4ee5-af10-172663b1a292]     14:     <%= csp_meta_tag %>
[4f6eaac8-942c-4ee5-af10-172663b1a292]     15:     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
[4f6eaac8-942c-4ee5-af10-172663b1a292]     16:     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
[4f6eaac8-942c-4ee5-af10-172663b1a292]     17:     <%= javascript_importmap_tags %>
[4f6eaac8-942c-4ee5-af10-172663b1a292]     18:   </head>
[4f6eaac8-942c-4ee5-af10-172663b1a292]
[4f6eaac8-942c-4ee5-af10-172663b1a292] app/views/layouts/application.html.erb:15

I actually have two projects that are set up pretty much identically (they have different functionality though) and the other one works.

I have added

config.assets.css_compressor = nil

to production.rb, test.rb and development.rb (just in case).

I'm installing the latest tailwindcss-rails at the time of this writing, 2.0.8. I'm also installing sassc-rails because it's needed for rails_admin but that's also true for the other project where that is needed.

Here's the curious thing. If I open a console to that Heroku project and run rake asset:precompile it actually finishes creating the missing files:

~ $ rake assets:precompile
+ /app/vendor/bundle/ruby/3.1.0/gems/tailwindcss-rails-2.0.8-x86_64-linux/exe/x86_64-linux/tailwindcss -i /app/app/assets/stylesheets/application.tailwind.css -o /app/app/assets/builds/tailwind.css -c /app/config/tailwind.config.js --minify

Done in 821ms.
W, [2022-03-19T12:38:43.514430 #6]  WARN -- : Removed sourceMappingURL comment for missing asset 'rails_admin/popper.js.map' from /app/vendor/bundle/ruby/3.1.0/gems/rails_admin-3.0.0.rc4/vendor/assets/javascripts/rails_admin/popper.js
W, [2022-03-19T12:38:43.534443 #6]  WARN -- : Removed sourceMappingURL comment for missing asset 'rails_admin/bootstrap.js.map' from /app/vendor/bundle/ruby/3.1.0/gems/rails_admin-3.0.0.rc4/vendor/assets/javascripts/rails_admin/bootstrap.js
I, [2022-03-19T12:38:43.744157 #6]  INFO -- : Writing /app/public/assets/tailwind-0c01c3e907ab268dbd4dcaa14542a12d0388cfbeb5733a183e88e1b26ef30afb.css
I, [2022-03-19T12:38:43.744385 #6]  INFO -- : Writing /app/public/assets/tailwind-0c01c3e907ab268dbd4dcaa14542a12d0388cfbeb5733a183e88e1b26ef30afb.css.gz
~ $

Why didn't that work during deployment? I can see it's running it:

       Using stimulus-rails 1.0.4
       Using tailwindcss-rails 2.0.8 (x86_64-linux)
       Bundle complete! 28 Gemfile dependencies, 90 gems now installed.
       Gems in the groups 'development' and 'test' were not installed.
       Bundled gems are installed into `./vendor/bundle`
       Bundle completed (0.38s)
       Cleaning up the bundler cache.
       Removing bundler (2.2.33)
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       
       Done in 788ms.
       Asset precompilation completed (3.58s)
       Cleaning assets
       Running: rake assets:clean
-----> Detecting rails configuration
-----> Discovering process types
       Procfile declares types     -> release, web, worker
       Default types for buildpack -> console, rake
-----> Compressing...
       Done: 78.7M
-----> Launching...
ruby-on-railstailwind-cssruby-on-rails-7


Solution 1:[1]

I found the problem:

At some point I removed app/assets/builds/.keep from the project which causes the app/assets/build directory to not be created when git cloning the repo. I don't understand why that causes tailwind.css to not be created on the first run, but it is created on the second run of rake asset:precompile.

Reported it as a bug just in case: https://github.com/rails/tailwindcss-rails/issues/158

Solution 2:[2]

rails assets:clean assets:precompile

this command resolved helped me to resolved this issue.

Solution 3:[3]

Try running the following commands on your local machine:

gem install bundler
bundle update --bundler
bundle lock --add-platform x86_64-linux

Then commit these changes, and deploy again.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jigar Bhatt
Solution 3 Laurent

Related Questions