How to install Tailwind CSS v3 in your Next.js application - Next Js

This guide will walk you through how to install Tailwind CSS v3 in your Next.js application.

Good to know: For the latest Tailwind 4 setup, see the Tailwind CSS setup instructions.

Installing Tailwind v3

Install Tailwind CSS and its peer dependencies, then run the init command to generate both tailwind.config.js and postcss.config.js files:

bash

pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

bash

npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

bash

yarn add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p

bash

bun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -p

Configuring Tailwind v3

Configure your template paths in your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your global CSS file:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the CSS file in your root layout:

tsx

import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

jsx

import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

</AppOnly> <PagesOnly>

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your global CSS file:

css

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the CSS file in your pages/_app.js file:

jsx

import '@/styles/globals.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

</PagesOnly>

Using classes

After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.

tsx

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

jsx

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

</AppOnly> <PagesOnly>

tsx

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

jsx

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

</PagesOnly>

Usage with Turbopack

As of Next.js 13.1, Tailwind CSS and PostCSS are supported with Turbopack.