Install Tailwind CSS with Vite

Last updated: 22 Oct 2025 (reflects v4 plugin guidance)

TL;DR

Install Tailwind and the official Vite plugin, import Tailwind once in your CSS, and enable the plugin in vite.config. No manual PostCSS or init -p for typical v4 setups.

What’s the fastest way to install Tailwind CSS with Vite in 2025?

Use Tailwind v4 with the official Vite plugin. Install the packages, add a single @import "tailwindcss"; to your CSS, and enable the plugin in vite.config.

1) Create a Vite app (any template):

npm create vite@latest my-app
cd my-app

2) Add Tailwind and the Vite plugin:

npm i -D tailwindcss @tailwindcss/vite

3) Import Tailwind in your CSS (e.g., src/index.css or src/style.css):

@import "tailwindcss";

4) Enable the plugin in vite.config.(ts|js):

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'     // or vue(), svelte(), etc.
import tailwindcss from '@tailwindcss/vite'

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

5) Run dev server:

npm run dev

That’s it. No content globs or PostCSS config required for the standard v4 flow.

Prefer a zero-build prototype? Try the CDN path later: Tailwind CDN v4 → Tailwind CSS CDN: Quick Setup Guide

Do I still need PostCSS, Autoprefixer, or a tailwind.config.js file?

Not for common v4 setups. v4 simplified install removes most boilerplate; config files are optional unless you’re doing advanced customization or intentionally sticking to v3.

If your stack requires PostCSS (e.g., Angular/Next in PostCSS mode), use @tailwindcss/postcss.

Also helpful:

• Fix editor warning “Unknown at rule” for @tailwind: Unknown at rule guide

How do I migrate an older v3 Vite project to v4?

Two options:
A) Upgrade to v4: remove legacy PostCSS/autoprefixer config, add @tailwindcss/vite, import once in CSS.
B) Stay on v3 temporarily: keep postcss + autoprefixer, tailwind.config.js, and content globs. When pinning v3, install it explicitly.

v3 fallback (pin and keep legacy flow):

npm i -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
# add content globs and @tailwind directives to your CSS as in v3 docs

(Only keep this if you cannot upgrade yet.)

Why does npx tailwindcss init -p cause confusion on v4?

Because v4’s typical Vite setup doesn’t need it. Many guides mix versions; running v3-style commands on v4 leads to errors or unnecessary files. If you truly use PostCSS on v4, install @tailwindcss/postcss instead of the old plugin path.

How do I verify Tailwind works in Vite?

Add a utility class and check the UI.

<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind</h1>

If you see the style, your plugin + CSS import are wired correctly.

Next steps:

• Font sizes and responsive text: Tailwind font-size guide

• Responsive layouts: Tailwind media queries

What changes per framework (React/Vue/Svelte)?

Only the framework plugin line in vite.config. The Tailwind part stays the same—keep @import "tailwindcss" and the Tailwind Vite plugin. For Vite starters and commands, see Vite’s official guide.

Common errors and quick fixes

• Tailwind classes don’t apply → Confirm tailwindcss() appears in plugins in vite.config and your CSS includes @import "tailwindcss";. Restart dev server.

• Following v3 steps on v4 → Remove old PostCSS/autoprefixer config unless your framework needs it; use the v4 plugin flow.

• Using PostCSS on v4 but plugin missing → Install and reference @tailwindcss/postcss.

• Production build tip → Build with vite build when you deploy.

Build faster with ready sections: Hero sections, Call-to-Action

FAQ

Is this guide for Tailwind v4?

Yes. It uses the official Vite plugin and one-line CSS import.

Can I still use PostCSS with v4?

Yes, if your framework needs it. Install @tailwindcss/postcss and follow that path; otherwise use the Vite plugin flow.

Do I need a tailwind.config.js file?

Not by default in v4. Create one only for advanced customization or when staying on v3.

Why does init -p look “broken” now?

It’s a v3-specific pattern. On v4 + Vite, you don’t need it, and mixing versions causes errors.

How do I build for production?

Run vite build. Then deploy the generated assets per your host’s guide.

Where can I learn the basics of Vite?

Start with the official Vite guide. It covers dev server, HMR, and templates