Setting Up Tailwind CSS v4

CSS-first configuration

Tailwind v4 is configured in CSS. Add @import "tailwindcss"; to your main stylesheet and use an integration: the Vite plugin (@tailwindcss/vite), the PostCSS plugin (@tailwindcss/postcss) or the standalone CLI (@tailwindcss/cli). Tailwind scans your project files automatically for class names (respecting .gitignore) and generates only the CSS you use. A tailwind.config.js file is no longer required; design tokens live in an @theme block in CSS.

A minimal Vite setup

Based on the official installation steps; check the docs for your framework.

// npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

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

/* src/style.css */
@import "tailwindcss";

Use @source for files outside detection

If classes live in a package or folder that is ignored, add @source "../path"; so Tailwind scans it.

Quick check: How do you include Tailwind in a v4 stylesheet?

• @import "tailwindcss";
• @tailwind everything;
• <script src="tailwind.css">
• require("tailwind")