Fix CSS Not Loading in Next.js App Router

Missing CSS in a Next.js App Router project has several distinct causes. Identify the styling system first: global CSS, CSS Modules, generated Tailwind utilities, or a production asset.

Styles are missing

Class missing

Check component code, CSS Module import, or Tailwind scanning.

Rule crossed out

Check selector specificity and source order.

No CSS asset

Run a production build and inspect the Network panel.

Use browser DevTools to determine whether the class is absent, overridden, or missing from the delivered stylesheet before changing configuration.

Confirm global CSS is in the root layout

Import site-wide resets, variables, fonts, and base styles from the root layout so every route shares the same foundation.

import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en"><body>{children}</body></html>
}

Use the CSS Module contract

Component styles need a .module.css filename and are imported as an object. Use styles.card rather than the literal string "card".

import styles from './Card.module.css'

export function Card() {
  return <article className={styles.card}>...</article>
}

Check Tailwind’s scan paths

If utilities are absent, confirm the configured scan paths include app/, src/, MDX, and any other source directories. Dynamic class names may need an explicit safelist.

Test the production asset

rm -rf .next
npm run build
npm run start

Inspect the rendered element and computed styles before changing build configuration. That reveals whether the failure is an import, generated class, selector, or deployment asset.

If this started during a Next.js 15 migration, also check whether route params now need to be awaited.

Confirm global CSS is in the root layout

Use the CSS Module contract

Check Tailwind’s scan paths

Test the production asset

Sources and further reading