Installing Tailwind CSS with Vite

Vite is a common modern setup

For a Vite project, Tailwind CSS integrates through the Tailwind Vite plugin. This gives the build tool a direct Tailwind integration and is a good starting point for modern frontend applications.

Basic process

Create or open a Vite project, install Tailwind CSS and the Vite plugin, add the plugin to Vite configuration, and import Tailwind in your main CSS file with @import "tailwindcss";.

Why the current setup matters

Tailwind CSS v4 uses a CSS-first approach. Older tutorials commonly show @tailwind base, @tailwind components, @tailwind utilities and a large tailwind.config.js. Those are v3-era patterns and should not be blindly copied into a new v4 project.