How to Add Tailwind CSS to a React App with Vite (Updated 2025 | Fast & Easy Setup)
Learn how to seamlessly integrate Tailwind CSS into your React + Vite project using the official Vite plugin — the easiest and fastest approach as recommended by the Tailwind Labs documentation.
In this video, I'll walk you through:
1. Installing Tailwind with Vite:
npm install tailwindcss @tailwindcss/vite
You’ll install both tailwindcss and the official Vite plugin in one go
2. Configuring Vite:
Modify your vite.config.ts to include the plugin:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [react(), tailwindcss()],
})
This ensures Tailwind is processed directly by Vite
3. Importing Tailwind styles:
In your main CSS file (like src/index.css):
@import "tailwindcss";
This single import gives you access to all Tailwind’s base, components, and utility styles
👍 If you find this helpful, please like 👍, subscribe, and leave a comment below with your Tailwind + Vite questions or experiences.
#React #Vite #TailwindCSS #WebDev #Frontend
