You are currently viewing documentation for version 13 of Next.js.
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 with CSS Modules.
Tailwind CSS
Style your Next.js Application using Tailwind CSS.
CSS-in-JS
Use CSS-in-JS libraries with Next.js
Sass
Style your Next.js application using Sass.
Was this helpful?