Setting up Tailwind CSS on Vite

To set up Tailwind CSS on a Vite project you install the tailwindcss and @tailwindcss/vite packages, register the plugin in the Vite config, and add one CSS import. That’s the whole setup.

I assume you created a Vite app, perhaps a React app using

npm create vite@latest the-app-name

# or

bun create vite the-app-name

Let’s add Tailwind CSS to style our application.

Install the packages

Install Tailwind CSS and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

#or 

bun add tailwindcss @tailwindcss/vite

The @tailwindcss/vite plugin is the recommended way to run Tailwind on Vite. It hooks into Vite directly, so there’s no PostCSS configuration to write.

Add the plugin to the Vite config

Add the @tailwindcss/vite plugin to your Vite configuration in vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    tailwindcss()
  ],
})

If the dev server is running, Vite restarts it automatically when the config file changes.

Import Tailwind in your CSS

Add this at the top of src/index.css to use the new import syntax:

@import "tailwindcss";

This single line replaces the three @tailwind base, @tailwind components and @tailwind utilities directives you’ll find in older tutorials. If you paste those old directives here instead, nothing happens: this Tailwind version wants the @import.

Notice what we did NOT create: there’s no tailwind.config.js and no content array listing your files. Tailwind now scans the project and detects the classes you use automatically.

Now Tailwind CSS is ready to use in our project.

You’ll see the layout now is a bit off, that’s a sign Tailwind is configured, because it’s adding some preflight styles:

Preflight is a set of base styles that resets browser defaults, so margins and heading sizes disappear until you style things yourself.

Try a class

Add a utility class somewhere in src/App.tsx to confirm everything works:

<h1 className="text-3xl font-bold text-orange-600">Vite + React</h1>

If the heading turns big, bold and orange, you’re done.

If classes don’t apply

The common mistake is putting the @import in a CSS file the app never loads. In the React template, src/index.css works because src/main.tsx imports it. If you added the line to some other file, move it to src/index.css, or import that file from your entry point.