CSS

Learn about the different ways to add CSS to your application, including CSS Modules, Global CSS, Tailwind CSS, and more.

Next.js provides several ways to use CSS in your application, including:

CSS Modules
Global CSS
Tailwind CSS
Sass
CSS-in-JS
External Stylesheets

CSS Modules

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 app directory:

app/blog/styles.module.css

.blog {
  padding: 24px;
}

import styles from './styles.module.css'
 
export default function Page({ children }: { children: React.ReactNode }) {
  return <main className={styles.blog}>{children}</main>
}

Global CSS

You can use global CSS to apply styles across your application.

To use global styles, create a app/global.css file and import it in the root layout to apply the styles to every route in your application:

app/global.css

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

// These styles apply to every route in the application
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Good to know: Global styles can be imported into any layout, page, or component inside the app directory. However, since Next.js uses React's built-in support for stylesheets to integrate with Suspense, this currently does not remove stylesheets as you navigate between routes which can lead to conflicts. We recommend using global styles for truly global CSS, and CSS Modules for scoped CSS.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that integrates seamlessly with Next.js.

Installing Tailwind

To start using Tailwind, install the necessary Tailwind CSS packages:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Configuring Tailwind

Create a postcss.config.mjs file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration:

postcss.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Using Tailwind

Add the Tailwind directives to your Global Stylesheet:

app/globals.css

@import 'tailwindcss';

Then, import the styles in the root layout:

import type { Metadata } from 'next'
// These styles apply to every route in the application
import './globals.css'
 
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

You can then start writing Tailwind's utility classes in your application.

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

External stylesheets

Stylesheets published by external packages can be imported anywhere in the app directory, including colocated components:

import 'bootstrap/dist/css/bootstrap.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

External stylesheets must be directly imported from an npm package or downloaded and colocated with your codebase. You cannot use <link rel="stylesheet" />.

How to use CSS in your application