Rails 7 asset pipeline SassC::SyntaxError with Tailwind

Question

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.

Sistrunk

Answer 1

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

Add this to application.rb

config.assets.css_compressor = nil

Bridgework

This has worked for me, thanks - would be lovely to get a bit more info on the answer as to why it works and any drawbacks @VincentBakker :) – Cholent

This works because sassc-rails tries to compress tailwindCSS files, which is not desirable since TailwindCSS is designed to be used without compression. So sassc-rails tries to compress tailwind, and this causes a conflict, and errors. So by disabling css compression, it solves the conflict. However, this means that CSS assets(not tailwind) will not be compressed, resulting in larger CSS files, which could potentially effect performance. I believe the more elegant fix is the gems need to be re-worked to play nicely whether you're using tailwind, or sass/css. But that's easier said than done. – Banky

Answer 2

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

Intermarriage

If I do that, then I get a new error: LoadError: cannot load such file -- sassc – Sistrunk

do you know that there is a gem for sassc? – Achaean

You may have a dependency that depends on sassc. Check your Gemfile.lock – Prelude

I was also getting LoadError: cannot load such file -- sassc as well even after setting config.assets.css_compressor = nil. The problem was I still had scaffolds.scss in my application so Sprockets would still load the Sprockets::SassCompressor – Noun

Answer 3

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

Grishilda

That worked for me for Unable to resolve 'tailwindcss/base' for missing asset 'tailwindcss/base' in application.tailwind.css – Spoonbill

Answer 4

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.

Apfelstadt

This feels the right answer to me - unfortunately, I've a dependency that includes sassc-rails so haven't cracked the problem this way yet, but wanted to say a big thanks and +1 on this :) – Cholent

I did the same as you but did not manage to make it work with --watch parameter for development environment. Did you create 4 separate scripts (2 for dev and 2 for prod -saas and tailwind)? – Olympie

Answer 5

the selected answer was not the solution for me. using dartsass-rails with sprockets and having a manifest.js with these contents:

//= link_directory ../stylesheets .css
//= link_tree ../builds

creates conflicts with application.*css being in the builds directory and probably in your stylesheets

I had to move all sass files into their own dir to really get around this, and created a app/assets/sass dir, then had to do this:

# config/initializers/dartsass.rb 
Rails.application.config.dartsass.builds = {
  "../sass/application.scss"                 => "application.css",
  # other files in ../sass
}

Ares

Answer 6

If you want to keep SASS compression enabled, you can monkey patch Sprockets::SassCompressor to skip the Tailwind css - set the following in an initializer:

# Required to stop Sprockets attempting to compress Tailwind CSS

require "sprockets/sass_compressor"

module SkipSassCompressionForTailwind
  TAILWIND_SEARCH = "! tailwindcss".freeze

  def call(input)
    if skip_compression?(input[:data])
      input[:data]
    else
      super
    end
  end

  def skip_compression?(body)
    body.include?(TAILWIND_SEARCH)
  end
end

Sprockets::SassCompressor.prepend SkipSassCompressionForTailwind

Patriotism

Answer 7

If you are able to find the actual file that will be used, you can do a find & replace to change rgb to RGB and then it will be skipped by sass.

Rettke