Rails 7 asset pipeline SassC::SyntaxError with Tailwind

user_147586 0
Viewed 2680

I'm working on getting a new Rails 7 project deployed to production (trying on both Heroku and Render.com) and am getting the following error during build:

$ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css

       Done in 408ms.
       Done in 0.90s.
       rake aborted!
       SassC::SyntaxError: Error: Function rgb is missing argument $green.
               on line 428 of stdin
       >>   color: rgb(29 78 216 / var(--tw-text-opacity));

          ---------^
       stdin:428

That's what I think is the relevant part, but here's a bit more context of the output if it's helpful.

Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.22.17
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       [3/4] Linking dependencies...
       [4/4] Building fresh packages...
       Done in 5.10s.
       yarn run v1.22.17
       $ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds
       
         app/assets/builds/application.js      185.5kb
         app/assets/builds/application.js.map  301.0kb
       
       Done in 0.10s.
       yarn install v1.22.17
       [1/4] Resolving packages...
       success Already up-to-date.
       Done in 0.12s.
       yarn run v1.22.17
       $ tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css
       
       Done in 408ms.
       Done in 0.90s.
       rake aborted!
       SassC::SyntaxError: Error: Function rgb is missing argument $green.
               on line 428 of stdin
       >>   color: rgb(29 78 216 / var(--tw-text-opacity));
       
          ---------^
       stdin:428
       /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sassc-2.4.0/lib/sassc/engine.rb:50:in `render'
       /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'
       /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/sass_compressor.rb:30:in `call'
       /tmp/build_d9d0bde2/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/processor_utils.rb:84:in `call_processor'

I set up the project using rails new project_name -j esbuild --css tailwind. Development mode works fine, just production deployment.

I'm not really sure where to even begin debugging this.

ruby-on-rails-7 asset-pipeline tailwind-css build ruby-on-rails
4 Answers

Preventing sassc-rails from setting sass as the compressor fixed it for me.

Add this to application.rb

config.assets.css_compressor = nil

user_179018370

From rails tailwind readme

Tailwind uses modern CSS features that are not recognized by the sassc-rails extension that was included by default in the Gemfile for Rails 6. In order to avoid any errors like SassC::SyntaxError, you must remove that gem from your Gemfile.

https://github.com/rails/tailwindcss-rails

user_23414670

Similar to Vincent's answer, I put config.assets.css_compressor = nil in config/environments/production.rb. Putting it in application.rb did not work.

I also still have the sassc-rails gem installed

user_42082260

Tomca32's answer explains why we are getting the error

However, I needed to do something since I still needed process Sass/Scss and could not just remove the sassc-rails gem, I needed to replace it.

I am running cssbundling-rails and esbuild in order to use Tailwind.

My solution came from running:

bundle remove sassc-rails
rails css:install:sass

then updating my package.json to include both the sass and tailwind commands. I did this by prepending the added sass command and && to the existing tailwind command:

"scripts": {
    "build:css": "sass ... && tailwindcss ...",
    "build": "node ./esbuild.config.js"
  }

I also needed to clean up and extra <%= stylesheet_link_tag "application" %> in my layout/application.html that got added from the build command and then my error cleared up.

user_75732230
Related