Why Tailwind CSS Wasn't Working in My Next.js 15 Project (And How I Fixed It)

?? Next.js 15 + Tailwind CSS Setup Bug & Fix ???

As a Frontend engineer, nothing is more frustrating than a seemingly minor bug consuming an entire day's worth of debugging. Recently, I encountered an issue setting up Tailwind CSS in my Next.js 15 App Router project. What seemed like a simple integration turned into a head-scratching mystery. Here’s what happened and how I fixed it. ??

The Problem:

While setting up Tailwind CSS, I followed the usual steps:

? Installed Tailwind CSS and initialized it.

? Added @tailwind base;, @tailwind components;, and @tailwind utilities; in my global.css file.

? Configured tailwind.config.js appropriately.

But then... Tailwind wasn’t working. ?? No styles were applied.

Investigation & The Root Cause:

After multiple debugging attempts, I realized Next.js 14+ (including 15) has slightly changed how stylesheets work, particularly when using ShadCN.

?? Issue: In projects using ShadCN with Tailwind, importing @tailwind base;, @tailwind components;, and @tailwind utilities; inside global.css is not strictly required. Doing so can cause unexpected behavior!

?? Why? ShadCN provides its own pre-configured Tailwind setup, so manually adding these imports can create conflicts or lead to styles not applying correctly.

The Fix ??:

If you’re using Next.js 15 + ShadCN + Tailwind CSS, follow this approach:

? Remove the redundant imports (@tailwind base, @tailwind components, @tailwind utilities) from your global.css if you’re using ShadCN.

?Add these instead:  

@import "tailwindcss";
@config "../tailwind.config.ts";

as Opposed to having these:
@tailwind base;
@tailwind components;
@tailwind utilities;

//Then your extended styles can follow suite 
Something like this:
@layer base {
  :root {
    --background: 210 50% 98%;
    --foreground: 210 40% 10%;

    --card: 0 0% 100%;
    --card-foreground: 210 40% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 40% 10%;

    --primary: 202 89% 48%;
    --primary-foreground: 0 0% 100%;

    --secondary: 33 96% 53%;
    --secondary-foreground: 210 40% 10%;

    --muted: 210 20% 94%;
    --muted-foreground: 210 15% 40%;

    --accent: 210 30% 95%;
    --accent-foreground: 210 40% 20%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 210 10% 85%;
    --input: 210 10% 85%;
    --ring: 202 89% 48%;

    --radius: 0.75rem;
  }

  .dark {
    --background: 210 50% 8%;
    --foreground: 210 40% 98%;

    --card: 210 40% 12%;
    --card-foreground: 210 40% 98%;

    --popover: 210 40% 12%;
    --popover-foreground: 210 40% 98%;

    --primary: 202 89% 48%;
    --primary-foreground: 0 0% 100%;

    --secondary: 33 96% 53%;
    --secondary-foreground: 0 0% 0%;

    --muted: 210 20% 20%;
    --muted-foreground: 210 15% 65%;

    --accent: 210 30% 20%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 210 15% 30%;
    --input: 210 15% 30%;
    --ring: 202 89% 48%;
  }
}

@layer base {
  * {
    @apply border-gray-200;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}        

? Ensure your tailwind.config.js extends correctly and has content paths correctly defined. ? Restart the Next.js server (npm run dev) to ensure changes apply.

Key Takeaways ??:

1?? Always check framework updates—Next.js 15 handles styles slightly differently.

2?? When using ShadCN, be mindful of its built-in Tailwind configurations.

3?? Debugging CSS issues? Start by inspecting your styles in DevTools.

This bug took hours to figure out, but I hope this post saves someone else valuable debugging time. Let me know if you've run into similar issues! ??

#Nextjs #TailwindCSS #ShadCN #FrontendDevelopment #Debugging #Web