Fix: Tailwind @layers Not Working in Next.js globals.css (2025)

You’ve defined a beautiful custom button style inside @layer components in your globals.css. You go to your React component, add the class, and... nothing. The browser shows no styles. You check the CSS in DevTools, and your custom layer styles are missing entirely from the build.

This is the "PostCSS Ghost."

Tailwind’s @layer directive is one of its most powerful features—it allows you to write custom CSS that stays organized and respects Tailwind’s "Purge" logic. But because it relies on a complex build pipeline (PostCSS -> Tailwind JIT -> Next.js CSS Loader), it is incredibly easy to break with a single line of misordered code.

For "Vibe Coders" using AI assistants like Cursor or v0, this is a recurring point of failure. AI tools often suggest adding custom CSS but frequently get the Import Order wrong, leading to styles that work in the AI's preview but fail in your local production build.

In this guide, we’ll solve the mystery of the ignored CSS layers. We’ll explain how Tailwind's JIT engine processes layers, why import order is the #1 killer of custom styles, and how to fix your PostCSS configuration once and for all.

How @layer Works in Tailwind's JIT Engine

To fix the ghost, you have to understand how Tailwind builds your CSS.

Tailwind doesn't just "append" your custom CSS to the end of a file. When you use @layer base, @layer components, or @layer utilities, Tailwind's Just-in-Time (JIT) engine moves that CSS into a specific "bucket" within its internal processing.

• Base: Resets, typography defaults, and global element styles.
• Components: Complex UI elements like cards or buttons.
• Utilities: High-specificity helper classes (like mt-4).

If you don't follow Tailwind's structural rules, the engine won't know which "bucket" to put your CSS in, and it will simply discard it during the build process to keep the file size small.

Common Trigger 1: Incorrect Import Order in globals.css

This is the most frequent cause of @layer failure. The @layer directives must be placed after the corresponding @tailwind directive.

The WRONG Way (Common AI Hallucination):

/* ❌ FAIL: Custom styles defined before Tailwind base */
@layer base {
  h1 { @apply text-4xl font-bold; }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

In the example above, Tailwind will initialize its base styles after your custom h1 style, potentially overwriting your changes with its default resets.

The RIGHT Way:

/* ✅ SUCCESS: Custom styles follow the directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 { @apply text-4xl font-bold; }
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-indigo-500 rounded-lg text-white transition-colors;
  }
}

Common Trigger 2: Component-Level Styles Overriding Layers

If your @layer styles are present in the CSS file but aren't showing up on the screen, check your CSS Specificity.

Tailwind's utilities (like bg-red-500) have a higher priority than its components (like .btn-primary). If you write: <button class="btn-primary bg-red-500">

The bg-red-500 will always win, even if your .btn-primary has a different background color defined in @layer components. This is intentional—Tailwind's utility-first philosophy means the specific utility should always have the final say.

The 'Important' Flag vs. Layer Priority

If you find yourself constantly fighting with layers, you might be tempted to use !important everywhere.

Stop. Instead of !important, use the Layer Priority system. If you want a custom style to be very hard to override, move it from @layer components to @layer utilities. This gives it the highest possible priority in the Tailwind hierarchy.

Fixing PostCSS Configuration for Layer Support

If your styles aren't working even with the correct order, your PostCSS configuration might be outdated. Next.js 14+ usually handles this automatically, but if you've customized your postcss.config.js, ensure tailwindcss is listed.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Debugging with the Tailwind CLI Output

If you’re still stuck, run the Tailwind CLI manually to see what it’s actually generating.

npx tailwindcss -i ./app/globals.css -o ./output.css

Open the output.css file and search for your custom class (e.g., .btn-primary).

• If it’s there: Your CSS is being built correctly, and the issue is likely a Next.js caching or import problem in layout.tsx.
• If it’s NOT there: Your tailwind.config.js content array is likely missing the files where you're using that class.

FlowQL: Solving CSS-in-JS and Tailwind Conflict Nightmares

CSS architecture is the "last 20%" of frontend polish. AI assistants are great at generating isolated components, but they are remarkably bad at managing global style hierarchies and build pipelines. They will suggest "quick fixes" that lead to bloated CSS files and inconsistent designs.

At FlowQL, we help developers move past these "styling roadblocks." When your Tailwind layers are being ignored, your Shadcn themes are clashing, or your production build is stripping out critical styles, we provide the expert human-in-the-loop debugging to get your UI looking exactly as intended.

If your "Vibe" is broken because of a CSS build error, it's time for a professional audit.

Conclusion

Tailwind @layer directives fail because of import order mismatches or build pipeline misconfigurations. By placing your custom styles after the @tailwind directives and auditing your PostCSS setup, you can ensure your custom CSS respects the Tailwind ecosystem.

Your Action Plan:

1. Open globals.css.
2. Move all @layer blocks to the very bottom of the file.
3. Restart your dev server (npm run dev).
4. Check DevTools to see if the styles are being loaded.

Don't let a PostCSS ghost haunt your project. [Book a session with FlowQL] and let’s fix your Tailwind styling issues today.

---

FAQ: Tailwind Layers and globals.css

Q: Does order matter in globals.css for Tailwind? A: Yes, it is the most important factor. Custom @layer styles must follow the @tailwind directives to be processed correctly by the JIT engine.

Q: Can I use @layer in separate CSS modules? A: No. The @layer directive only works in files processed directly by Tailwind (usually your main globals.css). It does not work inside .module.css files.

Q: Why do my styles disappear in the production build? A: This usually happens because of PurgeCSS. If your tailwind.config.js content array doesn't include the files using those classes, Tailwind will strip them out of the production bundle.