Skip to main content
The @tailwindcss/vite plugin provides seamless integration with Vite, automatically processing your CSS files and enabling hot module replacement (HMR) for fast development.

​
Installation

1

Install the plugin

Install the @tailwindcss/vite package:
npm install -D @tailwindcss/vite
2

Configure Vite

Add the plugin to your vite.config.js or vite.config.ts:
vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

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

Import Tailwind in your CSS

Add the Tailwind CSS import to your main CSS file:
src/index.css
@import 'tailwindcss';
4

Import CSS in your app

Import your CSS file in your application entry point:
src/main.ts
import './index.css'

​
Configuration

The Vite plugin accepts configuration options:
vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

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

​
Options

​
optimize
boolean | { minify?: boolean }
Enable CSS optimization and minification.
  • false - Disable optimization (default in development)
  • true - Enable optimization with minification (default in build mode)
  • { minify: false } - Optimize without minifying
Default: Automatically enabled for production builds

​
How It Works

The Vite plugin operates in two modes:

​
Development Mode (serve)

In development, the plugin:
  1. Intercepts CSS files - Transforms files that import Tailwind CSS
  2. Scans for candidates - Automatically detects Tailwind classes in your source files
  3. Generates CSS - Builds utilities on-demand
  4. Enables HMR - Provides hot module replacement for instant updates
  5. Watches files - Monitors template files (HTML, JSX, Vue, etc.) for changes
When you add or modify Tailwind classes in your templates, the plugin triggers a rebuild and the changes appear instantly in your browser without a full page reload.

​
Build Mode

During production builds, the plugin:
  1. Processes CSS - Transforms all CSS files that use Tailwind
  2. Scans all sources - Detects all Tailwind classes across your entire project
  3. Generates optimized CSS - Builds the final CSS with all utilities
  4. Optimizes output - Minifies and optimizes using Lightning CSS (when enabled)

​
Source Maps

The plugin automatically generates source maps in development when css.devSourcemap is enabled in your Vite config:
vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

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

​
File Watching

The plugin automatically watches:
  • Template files - HTML, JSX, TSX, Vue, Svelte, Astro files
  • CSS files - Your CSS files that import Tailwind
  • Config files - Configuration and plugin files
  • Custom sources - Files specified via @source directives

​
Full Reload Triggers

Changes to files outside the module graph (like standalone HTML or PHP files) trigger a full page reload automatically.

​
Content Detection

The plugin uses intelligent content detection: 
// The plugin scans these patterns by default:
**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}
You can customize content sources using the @source directive in your CSS: 
@import 'tailwindcss';
@source '../templates/**/*.php';
@source './components/**/*.vue';

​
Optimization

​
Development

By default, CSS is not optimized in development for faster builds:
vite.config.ts
export default defineConfig({
  plugins: [
    tailwindcss({
      optimize: false, // Faster builds
    }),
  ],
})

​
Production

In production, optimization is enabled automatically:
vite.config.ts
export default defineConfig({
  plugins: [
    tailwindcss({
      optimize: true, // Minified and optimized
    }),
  ],
})

​
Custom Optimization

Optimize without minification:
vite.config.ts
export default defineConfig({
  plugins: [
    tailwindcss({
      optimize: {
        minify: false, // Optimize but preserve formatting
      },
    }),
  ],
})

​
Framework Integration

​
React

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

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

​
Vue

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

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

​
Svelte

vite.config.ts
import { svelte } from '@sveltejs/vite-plugin-svelte'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

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

​
Environment API Support

The plugin supports both the legacy and modern Vite Environment API (Vite 6+), automatically detecting which API is available.
The plugin uses a Rust-based scanner for extremely fast candidate detection and supports Vite’s hot module replacement for instant updates during development.

​
Troubleshooting

​
CSS Not Updating

If your CSS isn’t updating in development:
  1. Ensure you’ve imported your CSS file in your app entry point
  2. Check that the CSS file contains @import 'tailwindcss'
  3. Verify that your template files are being watched

​
Build Performance

For large projects, consider:
  • Disabling optimization in development: optimize: false
  • Using specific content patterns with @source to limit scanning
  • Ensuring your project has a .gitignore to exclude node_modules

Build docs developers (and LLMs) love

Get started for freeTalk to us