Tailwind CSS v4 simplifies setup a lot: you can start with a single CSS import and zero configuration. The recommended setup depends on your build tool.

Recommended: Vite plugin

If your project uses Vite (React, Laravel, SvelteKit, Solid, etc.), the Vite plugin is the easiest path:

1. Install Tailwind and the Vite plugin:

npm install tailwindcss @tailwindcss/vite

2. Add the plugin to vite.config.ts (or .js):

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3. Import Tailwind in your CSS entry file (for example src/index.css):

@import "tailwindcss";

4. Run your dev server:

npm run dev

That’s it. Start using Tailwind classes in your HTML.

Not using Vite? Use the PostCSS plugin

If your setup relies on PostCSS (for example Next.js), use the official PostCSS plugin instead:

1. Install Tailwind and the PostCSS plugin:

npm install tailwindcss @tailwindcss/postcss postcss

2. Add the plugin to postcss.config.mjs:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

3. Import Tailwind in your CSS entry file:

@import "tailwindcss";

4. Run your build/dev command (npm run dev, npm run build, etc.).

Automatic content detection (no config required)

Tailwind v4 auto-detects the files where you use classes, so a content array is not required. If you need to include sources that are ignored by default, add them with @source in your CSS:

@import "tailwindcss";

@source "../vendor/**/*.blade.php";

Framework-specific guides

If you use a framework, prefer the official guides (Laravel, Next.js, Remix, etc.) because they include framework-specific details about where to put the CSS import and how to wire your build.

• Tailwind docs: https://tailwindcss.com/docs/installation

Lessons in this unit:

0:	Introduction
1:	Box model properties
2:	Colors
3:	Typography
4:	Flexbox and Grid in Tailwind
5:	Modifiers
6:	Responsive design in Tailwind
7:	Apply a style to children with Tailwind
8:	How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code
9:	How to align center vertically using Tailwind
10:	How to use custom fonts with Tailwind CSS
11:	Setting up Tailwind CSS on Vite
12:	Show-hide an element based on existence of a parent class in Tailwind
13:	The Tailwind Cheat Sheet
14:	▶︎ How to set up Tailwind CSS (v4)
15:	You can’t generate classes dynamically in Tailwind