Tailwind 4 in Next.js: Why @tailwind base; No Longer Works (and What to Do Instead)
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 ...