💥 That One Time globals.css Crashed My Next.js Build

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 😅