You ever update some colors in your tailwind.config.ts and suddenly your entire Next.js app refuses to compile? Yeah. That happened to me.
Error I saw:
SyntaxError: Unexpected token, expected "(" (18:19)
Import trace for requested module:
./src/app/globals.css
And I was like... huh? That file only has three Tailwind directives. What gives?
๐ The Culprit? My PostCSS Config
Turns out, the issue wasnโt in the CSS at all โ it was my postcss.mjs file. I had:
js
plugins: {
tailwindcss: {},
}
What I didn't have was this essential plugin:
js
autoprefixer: {}, // <- ๐ this bad boy is mandatory
Without autoprefixer, Next.js quietly panics when it tries to compile CSS โ and throws an error totally unrelated to the root cause. Classic.
๐ ๏ธ The Fix
Install Autoprefixer
bash
npm install -D autoprefixer
Update postcss.mjs
js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
export default config;
Clear the cache & restart
bash
rm -rf .next
npm run dev
Boom ๐ฃ No more phantom syntax errors.
๐ก Final Tip
If your Next.js build suddenly explodes and you didnโt even touch JavaScript, suspect your CSS pipeline. Itโs always the quiet files ๐
Top comments (0)