CssSyntaxError - unknown word in Tailwind and Next.js project - reactjs

Question

10 hours later and still cannot deploy my application due to below build failure. Using React/Next with Tailwind.
I believe it comes from PostCSS plugin but I cant find any of my errors (if it is one), it runs perfectly on localhost before production build. Any way to identify which class that is the error?
I get the following error when I deploy.
HookWebpackError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at makeWebpackError (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:41664:9)
at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:25354:12
at eval (eval at create (/vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:140346:10), <anonymous>:34:1)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
-- inner error --
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: /vercel/path0/static/css/50ca08b8d4bb65eb.css:1043:73: Unknown word
at Input.error (/vercel/path0/node_modules/next/node_modules/postcss/lib/input.js:148:16)
at ScssParser.unknownWord (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:522:22)
at ScssParser.other (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:149:12)
at ScssParser.parse (/vercel/path0/node_modules/next/node_modules/postcss/lib/parser.js:59:16)
at scssParse (/vercel/path0/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:322)
at new LazyResult (/vercel/path0/node_modules/next/node_modules/postcss/lib/lazy-result.js:133:16)
at Processor.process (/vercel/path0/node_modules/next/node_modules/postcss/lib/processor.js:28:14)
at CssMinimizerPlugin.optimizeAsset (/vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:43:12)
at /vercel/path0/node_modules/next/dist/build/webpack/plugins/css-minimizer-plugin.js:77:55
at runMicrotasks (<anonymous>)
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1
I've seen other threads such as Unknown word error from CSS Minimizer plugin on React build, and tried following guidelines but I cannot find any Tailwind class which may be incorrect or to advanced, at least not manually. Any ways to do this with help from extension or similar?

Answer 1

Check out this thread: Why am I getting this error (Tailwind + Next.js)? HookwebpackError, CssSyntaxError
In my case, the issue was with my tailwind.config.js.
First, I'd look for any dynamic classnames, searching for [${ or similar in your codebase to find them.
After removing those and still failing, I restored a previous version of tailwind.config.js from git that I knew was previously working, and it was able to build succcessfully.
Specifically, the build was failing due to including:
extend: {
backgroundImage: {
"primary-underline": "linear-gradient(180deg,transparent 80%,hsla(205,100%,55%,0.5) 0);"
},
}
The ; at EOL was the culprit.