Install Tailwind CSS

Install Tailwind CSS with Next.js

Tailwind CSS v4 Installation

Create your project

1npx create-next-app@latest my-project --typescript --eslint --app2cd my-project

Install Tailwind CSS

1npm install tailwindcss @tailwindcss/postcss

Create your CSS file

Add the Tailwind import to your global CSS file.

app/globals.css

1@import "tailwindcss";2 3@custom-variant dark (&:is(.dark *));4 5@theme inline {6  --font-mono: "Geist Mono", monospace;7  --color-background: var(--background);8  --color-foreground: var(--foreground);9}

Configure PostCSS

postcss.config.mjs

1const config = {2  plugins: {3    "@tailwindcss/postcss": {},4  },5};6 7export default config;

Start your build process

1npm run dev

Start using Tailwind

app/page.tsx

1export default function Home() {2  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;3}

Key differences in v4

Tailwind v4 is CSS-first. Theme values can live in @theme inline, custom variants can live in CSS, and the PostCSS plugin is now @tailwindcss/postcss.