官方文档
https://tailwindcss.com/docs/installation/using-vite
1. 安装依赖
pnpm add -D tailwindcss @tailwindcss/vite
2. 配置 Vite 插件
vite.config.ts：
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";export default defineConfig({plugins: [react(),tailwindcss(), // @tailwindcss/vite 插件],
});
3. 创建 CSS 入口文件（必须有一个 CSS 文件作入口）
src/index.css：
@import "tailwindcss";
这里是关键点：
- Tailwind 的
@import "tailwindcss"/@tailwind base;等指令 只能写在 CSS 文件里。 - 它不能直接在 TS/JS 中
import "tailwindcss"，因为 Tailwind 插件是处理 CSS 的，所以 必须有一个真实的 CSS 文件作为入口，让插件去解析。
4. 在 JS 入口中引入这个 CSS 文件
src/main.tsx：
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css"; // 引入上面的 CSS 入口文件ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<React.StrictMode><App /></React.StrictMode>,
);
这里的关系可以理解为：
- JS 入口（
main.tsx）：告诉 Vite “我要用这份 CSS”（import "./index.css"）。 - CSS 入口（
index.css）：告诉 Tailwind “我要用 Tailwind 的工具类”（@import "tailwindcss"）。
Vite 打包时：
- 发现
main.tsx里import "./index.css"→ 把这份 CSS 加入构建。 - Tailwind Vite 插件处理
index.css，展开 Tailwind 的所有工具类。 - 最终自动把生成的 CSS 注入到页面
<head>中（你不需要手写<link>标签）。
5. 使用 Tailwind 类名
在任意 React 组件中，例如 App.tsx：
export default function App() {return (<h1 className="text-3xl font-bold underline">Hello world!</h1>);
}
运行：
pnpm dev
# 或
pnpm tauri dev
就能看到 Tailwind 样式生效。