CSS

Next.js provides several ways to style your application using CSS, including:
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs.
Install Tailwind CSS:
Add the PostCSS plugin to your postcss.config.mjs file:
Import Tailwind in your global CSS file:
Import the CSS file in your root layout:
Now you can start using Tailwind's utility classes in your application:
If you need broader browser support for very old browsers, see the Tailwind CSS v3 setup instructions.
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 the app directory:
You can use global CSS to apply styles across your application.
Create a app/global.css file and import it in the root layout to apply the styles to every route in your application:
Global styles can be imported into any layout, page, or component inside the app directory. 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 for truly global CSS (like Tailwind's base styles), Tailwind CSS for component styling, and CSS Modules for custom scoped CSS when needed.
Stylesheets published by external packages can be imported anywhere in the app directory, including colocated components:
In React 19, <link rel="stylesheet" href="..." /> can also be used. See the React link documentation for more information.
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 before page.module.css:
To keep CSS ordering predictable:
Learn more about the alternatives ways you can use CSS in your application.
Last updated August 25, 2026
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.