sass fails after upgrading to tailwind v3

Question

After upgrading a react app v17.0.2 to TailwindCSS v3.0.5, the following sass error pops up:

ERROR in ./static/css/App.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Function rgb is missing argument $green.
        on line 392 of static/css/App.scss
>>   border-color: rgb(229 231 235 / var(--tw-border-opacity));

   ----------------^

    at processResult (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\webpack\lib\NormalModule.js:751:19)
    at C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\webpack\lib\NormalModule.js:853:5
    at C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.callback (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\sass-loader\dist\index.js:54:7)
    at Object.done [as callback] (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\neo-async\async.js:8069:18)
    at options.error (C:\Users\Alexander\repos\StockApp\StockApp.Frontend\node_modules\node-sass\lib\index.js:293:32)
 @ ./src/index.js 5:0-30

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.61.0 compiled with 2 errors in 9248 ms

I'm using node-sass v7.0 and sass-loader v12.4

Anyone facing the same problem after upgrading to tailwindcss v3 while using sass?

Answer 1

I'm using gulp but got a very similar error when upgrading to tailwind 3.0. This worked for me:

1. Updated my sass package (in my case gulp-sass which required adding sass and node-sass packages)
2. Small update to my gulp file for the latest gulp-sass

That fixed this specific error for me, hope it helps!

Answer 2

Ran into this - everything fine in dev then staging failed to precompile.

This (https://stackoverflow.com/a/70665740) solution worked for me.

I believe removing sassc-rails from your Gemfile will also resolve, but I'm not familiar enough with how Sass will get processed and if this would work for you. It's working okay for me but that might be cssbundling/tailwind/postcss.