How to use CSS in your application

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 pages/_app.js file:
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 pages directory:
You can use global CSS to apply styles across your application.
Import the stylesheet in the pages/_app.js file to apply the styles to every route in your application:
Due to the global nature of stylesheets, and to avoid conflicts, you should import them inside pages/_app.js.
Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript.
Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.
For global stylesheets, like bootstrap or nprogress, you should import the file inside pages/_app.js. For example:
To import CSS required by a third-party component, you can do so in your component. For example:
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 features mentioned in this page.
Last updated August 6, 2025
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.