Installing Tailwind v4

Tailwind v4 setup is deliberately tiny: install two packages, register a plugin, and add one line of CSS. There is no tailwind.config.js to create.

Install with the Vite Plugin

The Vite plugin is the fastest, recommended path for most projects.

npm install tailwindcss @tailwindcss/vite

Register the plugin in your Vite config:

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

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

Add the One Import

Create or open your CSS entry file and add a single line:

@import "tailwindcss";

That is the whole configuration. Make sure this CSS file is loaded by your app (for example imported from your main entry script or linked in index.html).

Run It

Start the dev server and use a utility to confirm it works:

<h1 class="text-3xl font-bold text-blue-600">It works.</h1>

If you are not on Vite, two other paths exist:

• PostCSS — install @tailwindcss/postcss and add it to your postcss.config.mjs.
• Standalone CLI — no build tool needed: npx @tailwindcss/cli -i in.css -o out.css --watch.

All three read the same @import "tailwindcss"; and the same @theme customization, so you can switch later without rewriting styles.