TopolearnVersion 4 setup is much simpler than v3, and older tutorials with tailwind.config.js no longer match.
Tailwind is a build step: it scans your source files for class names and generates a CSS file containing only the utilities you use.
In v4 there's no required JavaScript config and no @tailwind directives. Setup is two pieces.
- An integration. With Vite (React, Vue, Svelte, Astro and more), install
tailwindcssand@tailwindcss/viteand add the plugin tovite.config. Other tools use the PostCSS plugin@tailwindcss/postcss. With no bundler at all, the standalone CLI works:npx @tailwindcss/cli -i input.css -o output.css --watch. Frameworks such as Next.js and Laravel document their own one-step setup. - One CSS import. In your main stylesheet, write
@import "tailwindcss";. This pulls in the theme variables, the Preflight base styles and all utilities.
Then use classes in your markup, and the dev server rebuilds as you type. Content detection is automatic: Tailwind scans your project, skipping files in .gitignore, binary files and CSS files, so there's no content array to maintain.
Install the official editor extension (Tailwind CSS IntelliSense) for autocompletion, hover previews of the generated CSS and lint warnings, and the Prettier plugin prettier-plugin-tailwindcss to sort classes in a consistent order.
Tailwind v4 targets modern browsers only: Safari 16.4+, Chrome 111+ and Firefox 128+. If you must support older ones, stay on v3.4.
Example
// vite.config.js (npm install tailwindcss @tailwindcss/vite)
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [tailwindcss()],
});
// src/style.css contains a single line:
// @import "tailwindcss";
//
// index.html then just uses classes:
// <link rel="stylesheet" href="/src/style.css">
// <h1 class="text-3xl font-bold underline">Hello Tailwind</h1>Remember
- v4 setup = an integration (Vite, PostCSS or CLI) + @import "tailwindcss"
- Class detection is automatic, no content array
- Install IntelliSense and the Prettier class-sorting plugin
- v4 needs Safari 16.4+, Chrome 111+, Firefox 128+
Watch out for
- Following a v3 tutorial with @tailwind base/components/utilities and tailwind.config.js content paths.