Skip to main content
Next.js supports several CSS approaches out of the box. Use whichever fits your project:

CSS Modules

Locally scoped styles with auto-generated class names.

Global CSS

Apply styles across every route from a single file.

External stylesheets

Import CSS from npm packages directly in the App Router.

Tailwind CSS

Utility-first CSS framework built for Next.js.

​
CSS Modules

CSS Modules locally scope CSS by generating unique class names. This lets you reuse the same class name across different files without naming collisions. Create a file with the .module.css extension and import it into any component inside the app directory: 
.blog {
  padding: 24px;
}
CSS Module files must end in .module.css. Regular .css files are treated as global CSS and will not produce unique class names.

​
Global CSS

Global CSS applies styles across your entire application. Create a globals.css file and import it in your root layout to apply the styles to every route: 
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}
Global CSS can be imported into any layout, page, or component in the app directory. However, since Next.js uses React’s built-in stylesheet support to integrate with Suspense, stylesheets are not currently removed as you navigate between routes—which can lead to conflicts. Reserve global styles for truly global CSS (like resets or base typography). Use CSS Modules for component-specific styles.

​
External stylesheets

Stylesheets published by external packages can be imported anywhere in the app directory, including inside colocated components: 
import 'bootstrap/dist/css/bootstrap.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}
In React 19, you can also use <link rel="stylesheet" href="..." /> directly inside components.

​
CSS ordering and merging

Next.js optimizes CSS during production builds by automatically chunking (merging) stylesheets. The order of your CSS depends on the order you import styles in your code. For example, base-button.module.css will be ordered before page.module.css since <BaseButton> is imported first: 
import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

​
Recommendations

To keep CSS ordering predictable:
  • Contain CSS imports to a single JavaScript or TypeScript entry file where possible.
  • Import global styles and Tailwind stylesheets at the root of your application.
  • Use Tailwind CSS for most styling needs.
  • Use CSS Modules for component-specific styles when Tailwind utilities aren’t sufficient.
  • Use a consistent naming convention: <name>.module.css rather than <name>.tsx.
  • Extract shared styles into shared components to avoid duplicate imports.
  • Disable linters or formatters that auto-sort imports, such as ESLint’s sort-imports rule.
  • Use the cssChunking option in next.config.js to control how CSS is chunked.

​
Development vs production

EnvironmentBehavior
next devCSS updates apply instantly via Fast Refresh
next buildAll CSS is concatenated into minified, code-split .css files
CSS ordering can behave differently in development. Always verify the final CSS order by checking a production build with next build.

Build docs developers (and LLMs) love

Get started for freeTalk to us