DEV Community

Victor Maina
Victor Maina

Posted on

๐Ÿ’ฅ 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 ๐Ÿ˜…

Top comments (0)