Skip to content
App RouterGetting StartedCSS and Styling

How to use CSS in your application

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

This page will guide you through how to use each of these approaches.

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 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;
}
app/blog/page.tsx
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 new CSS file, for example app/global.css:

app/global.css
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Import the file in the root layout (app/layout.js) to apply the styles to every route in your application:

app/layout.tsx
// 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 built-in support currently does not remove stylesheets as you navigate between routes. Therefore, 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 Tailwind CSS packages and run the init command to generate both the tailwind.config.js and postcss.config.js files:

Terminal
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configuring Tailwind

Inside your Tailwind configuration file, add paths to the files that will use the Tailwind class names:

tailwind.config.ts
import type { Config } from 'tailwindcss'
 
export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

Using Tailwind

Add the Tailwind directives to your Global Stylesheet:

app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Then, import the styles in the root layout:

app/layout.tsx
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>
  )
}

Lastly, you can start writing Tailwind's utility classes in your application.

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

Sass

Next.js integrates with Sass using both the .scss and .sass extensions and syntax.

You can also use component-level Sass via CSS Modules and the .module.scssor .module.sass extension.

Installing Sass

To start using Sass, install the sass package:

Terminal
npm install --save-dev sass

Customizing Sass options

If you want to configure your Sass options, use the sassOptions option in next.config.js.

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}
 
export default nextConfig

CSS-in-JS

Warning: CSS-in-JS libraries which require runtime JavaScript are not currently supported in React Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React.

The following libraries are supported in Client Components in the app directory (alphabetical):

The following are currently working on support:

If you want to style Server Components, we recommend using CSS Modules or other solutions that output CSS files, like Tailwind CSS.

Configuring CSS-in-JS

To configure CSS-in-JS, you need to:

  1. Create a style registry to collect all CSS rules in a render.
  2. Use the useServerInsertedHTML hook to inject rules before any content that might use them.
  3. Create a Client Component that wraps your app with the style registry during initial server-side rendering.

styled-jsx

To configure styled-jsx for your application, create a new registry:

app/registry.tsx
'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 
export default function StyledJsxRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [jsxStyleRegistry] = useState(() => createStyleRegistry())
 
  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles()
    jsxStyleRegistry.flush()
    return <>{styles}</>
  })
 
  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}

Then, wrap your root layout with the registry:

app/layout.tsx
import StyledJsxRegistry from './registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

styled-components

To use styled-components, enable it in next.config.js:

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  compiler: {
    styledComponents: true,
  },
}
 
export default nextConfig

Then, use the styled-components API to create a global registry component to collect all CSS style rules generated during a render, and a function to return those rules. Then use the useServerInsertedHTML hook to inject the styles collected in the registry into the <head> HTML tag in the root layout.

lib/registry.tsx
'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 
export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })
 
  if (typeof window !== 'undefined') return <>{children}</>
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

Wrap the children of the root layout with the style registry component:

app/layout.tsx
import StyledComponentsRegistry from './lib/registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

External stylesheets

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

app/layout.tsx
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" />.

API Reference

Learn more about the features mentioned in this page by reading the API Reference.

sassOptions

Configure Sass options.

Next.js Compiler

Next.js Compiler, written in Rust, which transforms and minifies your Next.js application.