Search code examples
ruby-on-railsbuildasset-pipelinetailwind-cssruby-on-rails-7

Rails 7 asset pipeline SassC::SyntaxError with Tailwind


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.


Solution

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

    Add this to application.rb

    config.assets.css_compressor = nil