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 😅