Skip to content
App RouterGetting StartedCSS and Styling
You are currently viewing documentation for the canary channel of Next.js.

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>
}

Good to know:

  • CSS Modules are only enabled for files with the .module.css and .module.sass extensions.
  • In production, all CSS Module files will be automatically concatenated into minified and code-split .css files.
  • These .css files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.

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'
 
const config: Config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    // Or if using `src` directory:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
export default config

You do not need to modify postcss.config.js.

Using Tailwind

Add the Tailwind directives to your Global Stylesheet, for example:

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 write 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 sassOptions in next.config.js.

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

Learn more about the sassOptions configuration in the API Reference.

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" />.

Next Steps

Introduction
...
next.config.js

sassOptions

Configure Sass options.
Introduction
Architecture

Next.js Compiler

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