Tailwind v3 (and earlier): The documented integration is via PostCSS. You install tailwindcss, postcss, and autoprefixer, create a postcss.config.js, and a tailwind.config.js.....

Sooo much WORK,IKR?

THEN

import your CSS containing

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

Vite’s dev and build steps then process Tailwind automatically. This is the stable method for Tailwind v3 projects

WHAT CHANGED

Tailwind v4 and later: Tailwind v4 introduced a first-party Vite plugin (@tailwindcss/vite) for even faster builds and “zero config” content detection.

If you upgrade to Tailwind v4, you ONLY install both tailwindcss (v4) and @tailwindcss/vite.No taliwind.config.js ....not postcss.config.js..... JUST ADD to your vite.config.js, tailwindcss() to plugins.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Under the hood this still processes via PostCSS-like logic but with extra optimizations and automatic content scanning, so you don’t need manual content globs unless you have special cases.

and on your global css

@import "tailwindcss";

That's it!