Skip to content
    Pages RouterBuilding Your ApplicationStyling

    Styling

    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?