Tailwind CSS with Vite: A Modern Front-End Setup Guide

Modern front-end development is all about speed, simplicity, and performance. Vite and Tailwind CSS together form one of the fastest and most developer-friendly setups you can use today. Vite gives you lightning-fast builds and hot reloads, while Tailwind CSS provides a utility-first styling approach that eliminates bulky CSS files.

In this article, we’ll learn what Tailwind CSS and Vite are, why they work so well together, and how to set up Tailwind CSS with Vite step by step.

What Is Vite?

Vite is a modern front-end build tool created by Evan You (the creator of Vue). Unlike traditional bundlers, Vite uses native ES modules in development, making it incredibly fast.

Key features of Vite:

• Instant server start
• Lightning-fast Hot Module Replacement (HMR)
• Optimized production builds
• Framework-agnostic (works with React, Vue, Vanilla JS, etc.)

You can learn more about Vite from its official website:
https://vitejs.dev/

What Is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you style elements directly in your HTML using predefined classes. Instead of writing custom CSS for every component, you compose designs using utility classes like flex, p-4, text-center, and bg-blue-500.

Key benefits of Tailwind CSS:

• No context switching between HTML and CSS
• Highly customizable design system
• Smaller CSS output using Purge
• Faster UI development

Official documentation:
https://tailwindcss.com/

Why Use Tailwind CSS with Vite?

Using Tailwind CSS with Vite makes sense because:

• Vite’s fast dev server pairs perfectly with Tailwind’s JIT (Just-In-Time) compiler
• Minimal configuration required
• Excellent performance in development and production
• Ideal for modern frameworks and vanilla projects

This setup is widely used in React, Vue, and plain JavaScript projects.

Step-by-Step: Install Tailwind CSS with Vite

1. Create a Vite Project

First, create a new Vite project:

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

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

Choose your preferred framework (React, Vanilla, Vue, etc.) when prompted.

2. Install Tailwind CSS

Install Tailwind CSS along with PostCSS and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This creates two files:

• tailwind.config.js
• postcss.config.js

3. Configure Tailwind Content Paths

Open tailwind.config.js and update the content array so Tailwind knows where to scan your files:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This step is crucial for removing unused CSS in production.

4. Add Tailwind Directives to CSS

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

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives inject Tailwind’s core styles into your project.

5. Import CSS in Your Project

Make sure your CSS file is imported in main.js or main.jsx:

import './style.css'

import './style.css'

Without this import, Tailwind styles won’t apply.

6. Start the Development Server

Run the Vite dev server:

npm run dev

npm run dev

Your Tailwind CSS setup with Vite is now complete.

Example: Using Tailwind Classes

Try adding this inside your HTML or JSX file:

<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <h1 class="text-4xl font-bold text-blue-600">
    Tailwind CSS with Vite 🚀
  </h1>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <h1 class="text-4xl font-bold text-blue-600">
    Tailwind CSS with Vite 🚀
  </h1>
</div>

You’ll instantly see the styled output without writing a single line of custom CSS.

Production Build Optimization

When you run:

npm run build

npm run build

Tailwind automatically removes unused styles using its content configuration. This results in a small, optimized CSS file, which is great for performance and Core Web Vitals.

Common Issues and Fixes

Tailwind styles not applying?

• Check if style.css is imported correctly
• Verify content paths in tailwind.config.js

Slow rebuilds?

• Make sure you’re using the latest Tailwind version with JIT enabled (default in v3+)

When Should You Use This Setup?

Tailwind CSS with Vite is perfect for:

• Modern UI projects
• SaaS dashboards
• Landing pages
• React or Vue applications
• Developers who want fast builds and clean styling

Final Thoughts

Combining Tailwind CSS with Vite gives you a modern, scalable, and performance-focused front-end workflow. You get fast development, clean design utilities, and production-ready builds without unnecessary complexity.

Scrollbar in CSS: How Modern Websites Customize Scroll Experience

Responsive Web App Tips Using Tailwind CSS

Nasim Khan

I’m Nasim Khan, is a Software Engineer focused on building efficient and user-friendly web applications. SHe writes about web development, programming fundamentals, and modern technologies, sharing practical insights for developers and learners.