---
title: Tailwind CSS
description: Style your Next.js Application using Tailwind CSS.
url: "https://nextjs.org/docs/14/app/building-your-application/styling/tailwind-css"
docs_index: /docs/14/llms.txt
version: 14.2.35
lastUpdated: 2023-07-31
prerequisites:
- "Building Your Application: /docs/14/app/building-your-application"
- "Styling: /docs/14/app/building-your-application/styling"
---
> For an index of all Next.js documentation, see [/docs/14/llms.txt](/docs/14/llms.txt).
[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that works exceptionally well with Next.js.
## Installing Tailwind
Install the Tailwind CSS packages and run the `init` command to generate both the `tailwind.config.js` and `postcss.config.js` files:
```bash filename="Terminal"
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
## Configuring Tailwind
Inside `tailwind.config.js`, add paths to the files that will use Tailwind CSS class names:
```js filename="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
'./pages/**/*.{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: [],
}
```
You do not need to modify `postcss.config.js`.
## Importing Styles
Add the [Tailwind CSS directives](https://tailwindcss.com/docs/functions-and-directives#directives) that Tailwind will use to inject its generated styles to a [Global Stylesheet](/docs/app/building-your-application/styling/css-modules#global-styles) in your application, for example:
```css filename="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Inside the [root layout](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) (`app/layout.tsx`), import the `globals.css` stylesheet to apply the styles to every route in your application.
```tsx filename="app/layout.tsx" switcher
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 (
{children}
)
}
```
```jsx filename="app/layout.js" switcher
// These styles apply to every route in the application
import './globals.css'
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Using Classes
After installing Tailwind CSS and adding the global styles, you can use Tailwind's utility classes in your application.
```tsx filename="app/page.tsx" switcher
export default function Page() {
return Hello, Next.js!
}
```
```jsx filename="app/page.js" switcher
export default function Page() {
return Hello, Next.js!
}
```
## Usage with Turbopack
As of Next.js 13.1, Tailwind CSS and PostCSS are supported with [Turbopack](https://turbo.build/pack/docs/features/css#tailwind-css).
---
For an index of all available documentation, see [/docs/14/llms.txt](/docs/14/llms.txt)