CSS
Next.js provides several ways to style your application using CSS, including:
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs.
Install Tailwind CSS:
pnpmadd-Dtailwindcss@tailwindcss/postcssAdd the PostCSS plugin to yourpostcss.config.mjs file:
exportdefault { plugins: {'@tailwindcss/postcss': {}, },}Import Tailwind in your global CSS file:
@import'tailwindcss';Import the CSS file in your root layout:
import'./globals.css'exportdefaultfunctionRootLayout({ children,}: { children:React.ReactNode}) {return ( <htmllang="en"> <body>{children}</body> </html> )}Now you can start using Tailwind's utility classes in your application:
exportdefaultfunctionPage() {return ( <mainclassName="flex min-h-screen flex-col items-center justify-between p-24"> <h1className="text-4xl font-bold">Welcome to Next.js!</h1> </main> )}Good to know: If you need broader browser support for very old browsers, see theTailwind CSS v3 setup instructions.
CSS Modules
CSS Modules locally scope CSS by generating unique class names. This allows you to use the same class in different files without worrying about naming collisions.
To start using CSS Modules, create a new file with the extension.module.css and import it into any component inside theapp directory:
.blog {padding:24px;}import stylesfrom'./blog.module.css'exportdefaultfunctionPage() {return <mainclassName={styles.blog}></main>}Global CSS
You can use global CSS to apply styles across your application.
Create aapp/global.css file and import it in the root layout to apply the styles toevery route in your application:
body {padding:20px 20px 60px;max-width:680px;margin:0 auto;}// These styles apply to every route in the applicationimport'./global.css'exportdefaultfunctionRootLayout({ children,}: { children:React.ReactNode}) {return ( <htmllang="en"> <body>{children}</body> </html> )}Good to know: Global styles can be imported into any layout, page, or component inside the
appdirectory. However, since Next.js uses React's built-in support for stylesheets to integrate with Suspense, this currently does not remove stylesheets as you navigate between routes which can lead to conflicts. We recommend using global styles fortruly global CSS (like Tailwind's base styles),Tailwind CSS for component styling, andCSS Modules for custom scoped CSS when needed.
External stylesheets
Stylesheets published by external packages can be imported anywhere in theapp directory, including colocated components:
import'bootstrap/dist/css/bootstrap.css'exportdefaultfunctionRootLayout({ children,}: { children:React.ReactNode}) {return ( <htmllang="en"> <bodyclassName="container">{children}</body> </html> )}Good to know: In React 19,
<link rel="stylesheet" href="..." />can also be used. See theReactlinkdocumentation for more information.
Ordering and Merging
Next.js optimizes CSS during production builds by automatically chunking (merging) stylesheets. Theorder of your CSS depends on theorder you import styles in your code.
For example,base-button.module.css will be ordered beforepage.module.css since<BaseButton> is imported beforepage.module.css:
import { BaseButton }from'./base-button'import stylesfrom'./page.module.css'exportdefaultfunctionPage() {return <BaseButtonclassName={styles.primary} />}import stylesfrom'./base-button.module.css'exportfunctionBaseButton() {return <buttonclassName={styles.primary} />}Recommendations
To keep CSS ordering predictable:
- Try to contain CSS imports to a single JavaScript or TypeScript entry file
- Import global styles and Tailwind stylesheets in the root of your application.
- Use Tailwind CSS for most styling needs as it covers common design patterns with utility classes.
- Use CSS Modules for component-specific styles when Tailwind utilities aren't sufficient.
- Use a consistent naming convention for your CSS modules. For example, using
<name>.module.cssover<name>.tsx. - Extract shared styles into shared components to avoid duplicate imports.
- Turn off linters or formatters that auto-sort imports like ESLint’s
sort-imports. - You can use the
cssChunkingoption innext.config.jsto control how CSS is chunked.
Development vs Production
- In development (
next dev), CSS updates apply instantly withFast Refresh. - In production (
next build), all CSS files are automatically concatenated intomany minified and code-split.cssfiles, ensuring the minimal amount of CSS is loaded for a route. - CSS still loads with JavaScript disabled in production, but JavaScript is required in development for Fast Refresh.
- CSS ordering can behave differently in development, always ensure to check the build (
next build) to verify the final CSS order.
Next Steps
Was this helpful?