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, Global Styles, and external stylesheets.
Tailwind CSS
Style your Next.js Application using Tailwind CSS.
Sass
Style your Next.js application using Sass.
CSS-in-JS
Use CSS-in-JS libraries with Next.js
Was this helpful?