Function rgb is missing argument $green.

[murtazasultani]

I got this error when I switched to TailwindCSS v3

package.json:

{
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^3.0.7"
  },
  "dependencies": {
    "cssnano": "^5.0.14"
  },
  "scripts": {
    "dev": "bundle exec jekyll serve --watch",
    "watch": "jekyll serve --watch",
    "build": "JEKYLL_ENV=production bundle exec jekyll build"
  }
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  content: [
    './_includes/**/*.html',
    './_layouts/**/*.html',
    './*.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
    plugins: [
      require('tailwindcss')('./tailwind.config.js'),
      require('postcss-import'),
      require('autoprefixer'),
      ...(process.env.JEKYLL_ENV == "production"
        ? [require('cssnano')({})]
        : [])
    ]
}

[jozefvaclavik]

Same for me. Happens with Rails (jsbundling-rails with esbuild), but only when precompiling assets for production release. Development works fine.

SassC::SyntaxError: Error: Function rgb is missing argument $green.
  | on line 427 of stdin
  | >>   border-color: rgb(229 231 235 / var(--tw-border-opacity));
  |  
  | ----------------^

[sunwooz]

Worked like a gem(finally!)

[lelouvincx]

Thanks a lot! It works

[stevehill1981]

This works beautifully, thanks @gambala!

[ElvisLYC]

Thanks, this is life-saver

[xiaohui-zhangxh]

thanks, finally get away from sass

[kazuooooo]

In my case, there is a output.css file of tailwind build in my webpack build target.
(It means I tried build Tailwind 2 times)
So I can solve the problem by removing the output.css.

[kritik]

Monkeypatch if you don't want to switch off asset-pipeline.

require 'sprockets/sass_compressor'
class Sprockets::SassCompressor
  TAILWIND_SEARCH = "--tw-".freeze
  def call(*args)
    input = if defined?(data)
              data # sprockets 2.x
            else
              args[0][:data] #sprockets 3.x
            end

    return input if skip_compiling?(input) # added this line

    SassC::Engine.new(
      input,
      {
        style: :compressed
      }
    ).render
  end

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

end

[liqites]

you made my day!

[benjaminwood]

One more monkeypatch solution:

module SassCompressorMonkeypatch
  def call_processor(processor, input)
    super
  rescue SassC::SyntaxError => e
    raise unless processor == Sprockets::SassCompressor
    puts "Warning: Could not compress #{input[:filename]} with Sprockets::SassCompressor. Returning uncompressed result."
    metadata = (input[:metadata] || {}).dup
    metadata[:data] = input[:data]
    metadata
  end
end

Sprockets::Base.prepend(SassCompressorMonkeypatch)

Instead of looking in the source for tailwind classes, this one simply rescues SassC::SyntaxError and returns the input, which in the case of tailwind is already compressed.

[MinRam]

rgba( R, G, B, A)

[marckohlbrugge]

Did anyone ever find a reliable solution for this?

[kritik]

@marckohlbrugge check my monkey patch

[stefanblazevski]

@marckohlbrugge If you want to or have to use the new syntax, you can use upper case RGB instead, and sass will ignore it.
This is especially useful when you are using CSS variables you don't control:
.header{ background-color: RGB(var(--color-blue) / 49%); }

[guschiavon]

@stefanblazevski can you explain how to make RGB uppercase in all instances of Tailwind?

[emcoding]

I tried the gem mentioned in the discussion, I tried different env settings for assets in test.rb , but it fails with rails test:prepare and with RAILS_ENV=test bin/rails assets:precompile. BUT it works without problems when I precompile in dev env:

% bin/rails assets:clobber
% bin/rails assets:precompile

Beats me.

[pedryvo]

On Fly.io deploys, change this line in Dockerfile:

RUN RAILS_ENV=development SECRET_KEY_BASE=1 ./bin/rails assets:precompile

[jurgens]

this one works. for some reason assets compilation works fine in development but not in test environment