Install Tailwind CSS with Vite

In a real project you install Tailwind and let a build tool generate the CSS. With Vite, this takes two packages and a few lines.

Install Tailwind and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

Add the plugin to vite.config.js:

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

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

Then import Tailwind from your main CSS file, for example src/style.css:

@import "tailwindcss";

That single line is the whole Tailwind v4 setup. There is no tailwind.config.js and no content array. Configuration lives in CSS.

Make sure that CSS file is actually loaded, either linked from index.html or imported by your JavaScript entry. A correctly configured plugin can’t style a page that never loads the stylesheet. This is the most common reason “Tailwind doesn’t work” on a fresh install.

Check that it runs

Start the dev server with npm run dev and add one utility you can’t miss:

<h1 class="text-3xl font-bold text-blue-700">Tailwind is running</h1>

If the heading is big, bold, and blue, you’re done. Inspect it in DevTools and you’ll see the rule comes from the generated stylesheet, not from an inline style.

How detection works in v4

Tailwind v4 finds your source files automatically. It starts from the working directory of the build, and it skips node_modules, binary files, and anything your .gitignore excludes. For a normal project you don’t configure anything. Monorepos and external component libraries sometimes need explicit sources, which we cover in the next lesson.

The model is build-time. Tailwind reads complete class names in your files, generates the CSS they need, and Vite serves or bundles it. Your application never calls Tailwind at runtime.

Frameworks

If you use Astro, Next.js, SvelteKit, or another framework, follow the installation guide for that framework. Each one has its own CSS entry point and its own place to register the Vite plugin. Don’t paste a generic vite.config.js over a working framework config.

Before you move on, verify both modes:

npm run dev
npm run build

After the build, look in dist/assets/. You should find a CSS file, and dist/index.html should reference it. Try this in a throwaway Vite project: add one base utility and one hover: utility, run both commands, and open the built page with no Play CDN script anywhere.