Install Tailwind CSS with Vite

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 the CSS entry used by your application:

@import "tailwindcss";

Make sure that CSS entry is actually linked from the HTML or imported by the JavaScript entry. A correct Vite plugin cannot style a page that never loads the resulting stylesheet.

Start the dev server and add one obvious utility:

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

Tailwind v4 automatically detects normal project source files, so a new basic setup does not need the v3 content array. Detection starts from the build’s working directory and ignores sources such as node_modules and files excluded by .gitignore. Monorepos and external component libraries can need explicit source registration.

The build-time model matters: Tailwind finds complete candidates, generates the required CSS, and Vite serves or bundles that CSS. Your application does not call Tailwind at runtime.

Use the installation guide for your actual framework when it has one. A framework can have a different CSS entry, Vite integration point, or server-rendering build. Do not copy a generic config over working framework configuration blindly.

Verify both modes:

npm run dev
npm run build

In DevTools, confirm the utility rule comes from the generated stylesheet. In the production output, confirm the CSS asset exists and the page references it.

Your action is to install Tailwind in a disposable Vite project, add one base and one hover utility, run development and production builds, and prove the production page works with no Play CDN script.