āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š nextjs/app/guides/tailwind-v3-css ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
{/* The content of this doc is shared between the app and pages router. You can use the <PagesOnly>Content</PagesOnly> component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
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.
Install Tailwind CSS and its peer dependencies, then run the init command to generate both tailwind.config.js and postcss.config.js files:
pnpm add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
npm install -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
yarn add -D tailwindcss@^3 postcss autoprefixer
npx tailwindcss init -p
bun add -D tailwindcss@^3 postcss autoprefixer
bunx tailwindcss init -p
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:
@tailwind base;
@tailwind components;
@tailwind utilities;
Import the CSS file in your root layout:
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
import './globals.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
/** @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:
@tailwind base;
@tailwind components;
@tailwind utilities;
Import the CSS file in your pages/_app.js file:
import '@/styles/globals.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.
<AppOnly>export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}
As of Next.js 13.1, Tailwind CSS and PostCSS are supported with Turbopack.
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā