How to Use Tailwind CSS v4 as a Plugin in Vite

Published on 2025-03-12

🔧 **Overview**: Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS.

1️⃣ **Install Tailwind CSS and the Vite plugin:**

1npm install tailwindcss @tailwindcss/vite

2️⃣ **Configure the Vite plugin in `vite.config.ts`:**

1import { defineConfig } from 'vite'
2import tailwindcss from '@tailwindcss/vite'
3
4export default defineConfig({
5  plugins: [
6    tailwindcss(),
7  ],
8})

3️⃣ **Import Tailwind CSS in your stylesheet:**

1@import "tailwindcss";

4️⃣ **Run the development server:**

1npm run dev

5️⃣ **Use Tailwind classes in your HTML:**

1<!doctype html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link href="/src/styles.css" rel="stylesheet">
7</head>
8<body>
9  <h1 class="text-3xl font-bold underline">
10    Hello world!
11  </h1>
12</body>
13</html>

🎉 That's it! Tailwind CSS v4 is now seamlessly integrated with your Vite project.