Tailwind CSS with Vite Complete Setup Guide 2026

Tailwind CSS and Vite are the perfect combination for modern frontend development. This guide walks you through setting up Tailwind CSS v4 with Vite using the official @tailwindcss/vite plugin, covering React, Vue, and Vanilla JavaScript project configurations.

💡 Quick Answer

How to install Tailwind CSS with Vite: Run npm install -D tailwindcss @tailwindcss/vite, add the tailwindcss() plugin to your vite.config.ts, then add @import "tailwindcss" to your main CSS file. That's it no config file needed with Tailwind CSS v4.

React + Vite + Tailwind CSS Setup

The most popular combination. Create a React project with Vite and add Tailwind CSS v4 in under 2 minutes.

1. Create the React + Vite project

bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

2. Install Tailwind CSS

bash
npm install -D tailwindcss @tailwindcss/vite

3. Add the Vite plugin

typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

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

4. Import Tailwind CSS

css
/* src/index.css */
@import "tailwindcss";

5. Start building

bash
npm run dev
tsx
// src/App.tsx
export default function App() {
  return (
    <div className="min-h-screen bg-gray-950 flex items-center justify-center">
      <h1 className="text-4xl font-bold text-cyan-400">
        Tailwind CSS + Vite + React ⚡
      </h1>
    </div>
  )
}

Vue + Vite + Tailwind CSS Setup

Vue developers can use the same @tailwindcss/vite plugin with identical configuration.

bash
npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm install -D tailwindcss @tailwindcss/vite

The vite.config.ts setup is the same just swap @vitejs/plugin-react with @vitejs/plugin-vue.

Custom Theme Configuration

Tailwind CSS v4 uses CSS-first configuration. Customize your design tokens directly in your stylesheet.

css
@import "tailwindcss";

@theme {
  --color-brand: #06b6d4;
  --color-brand-dark: #0891b2;
  --font-display: 'Inter', sans-serif;
  --breakpoint-3xl: 1920px;
}

These custom values are automatically available as utility classes: bg-brand, text-brand-dark, font-display, and 3xl: responsive prefix.

Vite Plugin vs PostCSS: Which Should You Choose?

Feature@tailwindcss/vite@tailwindcss/postcss
Setup ComplexitySimple (1 plugin)Moderate (PostCSS config)
HMR SpeedNear-instantFast
Build PerformanceOptimized for ViteStandard PostCSS
Framework SupportVite-based onlyAny build tool
Recommended ForNew Vite projectsExisting PostCSS pipelines

Frequently Asked Questions

Vite is recommended for Tailwind CSS v4 because the dedicated @tailwindcss/vite plugin provides the fastest development experience. It uses native ES modules for instant hot module replacement and leverages the Oxide engine for sub-second build times. The Vite plugin also offers better integration than the PostCSS approach.
No configuration file is needed with Tailwind CSS v4 and Vite. Tailwind v4 uses automatic content detection and CSS-first configuration via the @theme directive. All customization happens directly in your CSS files, eliminating the need for separate JavaScript configuration.
Yes, Tailwind CSS works perfectly with Vite and TypeScript. Use the --template react-ts flag when creating your Vite project to get TypeScript support. Tailwind CSS utility classes are framework-agnostic and work identically whether you use TypeScript or JavaScript.
In Tailwind CSS v4, add custom colors using the @theme directive in your CSS file. Use @theme { --color-brand: #06b6d4; } to define a custom brand color, then use it as bg-brand or text-brand in your templates. No separate config file is needed.
Tailwind CSS v4 with Vite delivers near-instant hot module replacement during development. The Oxide engine (written in Rust) processes CSS up to 5x faster than Tailwind v3. Full production builds typically complete in under 500ms for most projects, making it the fastest Tailwind CSS development setup available.

Next steps: explore the Tailwind CSS Cheat Sheet for a quick class reference, or learn Tailwind CSS with React for advanced integration patterns.