Install Tailwind CSS

Install Tailwind CSS with Next.js (v3 and v4).

Tailwind CSS v3 Installation (Legacy)

Create a new project

To get started, create a new Next.js project using your preferred package manager:

npx create-next-app@latest my-project --typescript --eslint
cd my-project

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

tailwind.config.ts

/** @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}",
 
  // Or if using `src` directory:
  "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
   theme: {
   extend: {},
  },
 plugins: [],
};

Add the Tailwind directives to your CSS

global.css

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

Start using Tailwind

page.tsx

export default function Home() {
  return <h1 className="text-4xl font-semibold italic text-blue-600">Welcome!</h1>;
}

Tailwind CSS v4 Installation

Create a new project

To get started, create a new Next.js project using your preferred package manager:

npx create-next-app@latest my-project --typescript --eslint
cd my-project

Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli

Next Steps

After installation, check out our globals.css .

Configure PostCSS

postcss.config.js

module.exports = {
 plugins: {
   "@tailwindcss/postcss": {},
   },
 };

Start using Tailwind

page.tsx

export default function Home() {
  return <h1 className="text-4xl font-semibold italic text-blue-600">Welcome!</h1>;
}

Done , All Set