How to Fix Tailwind CSS Not Applying in Next.js When the App Builds Fine but the UI Looks Completely Unstyled

Why this issue is so annoying: the app runs, the components render, and nothing crashes. It just looks like your design got erased by a very calm and very expensive ghost.

Typical symptoms:

1. the page renders with plain browser defaults
2. some Tailwind classes work and others do not
3. a refactor to the App Router made styling disappear

Step 1: confirm the global CSS file is imported

In an App Router project, your app/layout.tsx should import the global stylesheet:

import "./globals.css";

If that import is missing, Tailwind can compile successfully and still never reach the rendered app.

Step 2: confirm Tailwind sees your files

Check tailwind.config.js or tailwind.config.ts:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

If the file paths do not include where your components live, Tailwind will not generate those classes.

Step 3: confirm the stylesheet contains the Tailwind directives

Your globals.css should include:

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

If those lines are gone, the build may still finish, but the Tailwind layers never load.

Step 4: watch out for dynamic class generation

Tailwind cannot always see runtime-built strings like:

const cls = "bg-" + color + "-500";

Prefer explicit mappings:

const colorClasses = {
  red: "bg-red-500",
  blue: "bg-blue-500",
};

This makes the classes visible to the scanner.

Step 5: clear stale build output

rm -rf .next
npm run dev

Sometimes the bug is configuration plus stale generated output, not configuration alone.

A short verification trick

Put something unmistakable in a component:

export default function TestBox() {
  return <div className="bg-red-500 text-white p-6 text-2xl">Tailwind works</div>;
}

If that does not style correctly, the issue is global Tailwind setup, not your component logic.

Bottom line

When Tailwind does not apply in Next.js, check imports, content globs, directives, and dynamic class construction before blaming the framework. Most failures come from one of those four places.

Sources

• Tailwind CSS installation with Next.js
• Next.js App Router documentation