Install Tailwind CSS

Install Tailwind CSS with Next.js

1

Create a new project

npx create-next-app@latest my-app --typescript --eslint && cd my-app
2

Install Tailwind CSS

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

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: [], };
4

Add the Tailwind directives to your CSS

globals.css
@tailwind base; @tailwind components; @tailwind utilities;
5

Start the development server

cd my-app && npm run dev
6

Start using Tailwind

page.tsx
export default function Home() { return <h1 className="text-4xl font-extrabold">Hello world!</h1>; }