Tailwind CSS with Vite : Complete Installation & Setup Guide

Introduction

Tailwind CSS v4 introduced a cleaner and more seamless way to work with modern build tools. When using Vite, the official and recommended approach is to install Tailwind CSS as a Vite plugin.

This method is faster, simpler, and works smoothly with frameworks like Laravel, React, SvelteKit, Nuxt, SolidJS, and React Router.

In this guide, you’ll learn the correct and up-to-date way to use Tailwind CSS with Vite.

Why Use Tailwind CSS as a Vite Plugin?

Installing Tailwind as a Vite plugin provides:

Faster build and reload times
Cleaner configuration
No PostCSS or Autoprefixer setup required
Seamless framework integration
Officially recommended by Tailwind

This approach is now the best practice for Tailwind + Vite projects.

Tailwind CSS Version Information

All modern Tailwind components, including Tailwind Plus, are built for:

Tailwind CSS v4.1

The Vite plugin is designed specifically for Tailwind v4+, ensuring full compatibility and performance.

Step 1: Create a Vite Project

If you don’t already have a project, create one using Create Vite:

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

Choose your preferred framework (Vanilla, React, Vue, etc.), then install dependencies:

npm install

Step 2: Install Tailwind CSS and Vite Plugin

Install Tailwind CSS along with the official Vite plugin:

npm install tailwindcss @tailwindcss/vite

This installs:

Tailwind CSS v4.1
Tailwind’s official Vite integration

Step 3: Configure the Vite Plugin

Open vite.config.ts (or vite.config.js) and add the Tailwind plugin:

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

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

No PostCSS configuration is required.

Step 4: Import Tailwind CSS

Open your main CSS file (example: src/style.css) and add:

@import "tailwindcss";

This single line replaces the old @tailwind base, components, and utilities directives.

Step 5: Start the Development Server

Run the Vite development server:

npm run dev

Vite will start instantly with Tailwind CSS fully enabled.

Step 6: Start Using Tailwind in HTML

Make sure your CSS file is included (Vite usually handles this automatically).

Example HTML:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/style.css" rel="stylesheet">
</head>
<body>

  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

</body>
</html>

If the heading appears large, bold, and underlined, Tailwind is working correctly.

Why This Is the Best Tailwind + Vite Setup

Officially supported by Tailwind
Minimal configuration
Faster development experience
Cleaner project structure
Ideal for modern frameworks

This setup is now preferred over older PostCSS-based workflows.

Frameworks That Work Seamlessly with This Setup

Laravel (with Vite)
React
SvelteKit
Nuxt
SolidJS
React Router

Common Mistakes to Avoid

Installing PostCSS unnecessarily
Using old @tailwind base directives
Mixing CDN and Vite setups
Skipping the Vite plugin

Interview Questions and Answers

1. What is the official way to use Tailwind CSS with Vite?

By installing Tailwind as a Vite plugin using @tailwindcss/vite.

2. Which Tailwind version works with the Vite plugin?

Tailwind CSS v4 and above, currently v4.1.

3. Do we need PostCSS with Tailwind v4 and Vite?

No. The Vite plugin removes the need for PostCSS configuration.

4. Why is this setup preferred over older methods?

It is faster, cleaner, officially supported, and easier to maintain.

5. Is this setup production-ready?

Yes. It is recommended for real-world and enterprise applications.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Installing Tailwind CSS Using npm: Step-by-Step Setup Guide

Next: Setting Up Tailwind CSS with Laravel (Vite & Laravel Mix)

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us