Tailwind 4 in Next.js: Why @tailwind base; No Longer Works (and What to Do Instead)

If you’re like me, when you updated to Tailwind 4 in a Next.js project, you might have opened your page… and thought:

“Wait… why are all my Tailwind styles gone? Did I break something?”

I did. I genuinely thought I had a bug in my setup. I double-checked my tailwind.config.ts, my globals.css, and even restarted the dev server… nothing.

After a bit of digging, I discovered: Tailwind 4 changed the recommended way to include Tailwind in your CSS.

What used to work

In Tailwind 3 (and earlier), your globals.css would look like this:

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

That’s all you needed — Tailwind would inject its base styles, components, and utilities.

What changed in Tailwind 4

Now, the new and recommended approach is much simpler:

@import "tailwindcss";

• This single import pulls in everything: base styles, components, and utilities.
• It works perfectly with Next.js App Router projects and PostCSS setups.
• You no longer need separate @tailwind directives unless you have a very custom setup.

My Takeaway

I was surprised at first — it felt like a bug. But actually, it’s a cleaner, simpler setup. Once I switched to @import "tailwindcss";, everything started working immediately.

If you’re upgrading to Tailwind 4 in a Next.js project, don’t panic if your @tailwind base; classes suddenly disappear. It’s not a bug — it’s just the new way Tailwind works.

Quick Setup Checklist for Next.js + Tailwind 4

1. Install dependencies:

   pnpm add -D tailwindcss postcss autoprefixer
   pnpm dlx tailwindcss init -p

2. Update globals.css:

   @import "tailwindcss";

3. Check tailwind.config.ts content paths:

   content: [
     "./app/**/*.{ts,tsx,js,jsx}",
     "./components/**/*.{ts,tsx,js,jsx}",
   ],

4. Import globals.css in layout.tsx:

   import "./globals.css";

5. Restart dev server:

   pnpm dev

Final Thoughts

It’s always a bit jarring when a library changes something that has “just worked” for years. But Tailwind 4’s approach is cleaner and simpler in the long run.

And honestly… I love the simplicity. One line, everything works.

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️