Tauri + Vite + React 引入 Tailwind

官方文档

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>,
);

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 样式生效。