Using Tailwind CSS with Vite

Introduction

Tailwind CSS + Vite is one of the fastest and most modern setups for building frontend applications. Vite provides lightning-fast bundling ⚡, while Tailwind gives utility-first styling 🎨 for rapid UI development.

Why Use Tailwind with Vite? 🤔

  • Ultra-fast HMR (Hot Module Reloading) 🚀
  • Zero-config PostCSS integration 🔧
  • Perfect for React / Vue / Vanilla JS projects 🧩
  • Lightweight, modern development workflow 📦

Step-by-Step Setup Guide 🧠

1. Create a Vite Project

Run the following command to create a new Vite project:

Create Vite Project

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

Note

Choose the template you prefer (React, Vue, Vanilla, etc.).

2. Install Tailwind CSS

Install Tailwind, PostCSS, and Autoprefixer:

Install Tailwind

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

3. Configure Tailwind

Update tailwind.config.js to include Vite's template paths:

tailwind.config.js

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

4. Add Tailwind to CSS

Inside src/index.css (or main.css), add:

index.css

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

5. Import CSS in Your Entry File

Make sure main.js / main.jsx / main.tsx imports the CSS file:

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

6. Start the Development Server

Start Dev Server

npm run dev

Now Tailwind CSS is fully working with Vite! 🎉

Testing Tailwind ⚙️

Try adding a quick Tailwind component:

App.jsx Example

export default function App() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-purple-600 text-white text-4xl font-bold">
      Tailwind + Vite 🎉
    </div>
  );
}
>>“Fast development comes from the perfect tools. Tailwind + Vite is that perfect combo.” 🔥

Useful Links 🔗