Skip to content
Important
Security Advisory: React2Shell & two new vulnerabilities
Find out more
Pages RouterBuilding Your ApplicationStyling
You are currently viewing the Pages Router documentation for version 14 of Next.js.

Styling

Last updated June 28, 2023

Next.js supports different ways of styling your application, including:

  • Global CSS: Simple to use and familiar for those experienced with traditional CSS, but can lead to larger CSS bundles and difficulty managing styles as the application grows.
  • CSS Modules: Create locally scoped CSS classes to avoid naming conflicts and improve maintainability.
  • Tailwind CSS: A utility-first CSS framework that allows for rapid custom designs by composing utility classes.
  • Sass: A popular CSS preprocessor that extends CSS with features like variables, nested rules, and mixins.
  • CSS-in-JS: Embed CSS directly in your JavaScript components, enabling dynamic and scoped styling.

Learn more about each approach by exploring their respective documentation:

CSS Modules

Style your Next.js Application using CSS Modules.

Tailwind CSS

Style your Next.js Application using Tailwind CSS.

CSS-in-JS

Use CSS-in-JS libraries with Next.js

Sass

Learn how to use Sass in your Next.js application.

Was this helpful?

supported.