如何在React项目中配置Tailwind CSS？

create-react-app 项目必须用 PostCSS 链路，vite 项目优先用 @tailwindcss/vite 插件；二者不可混用，否则导致类名丢失、热更新失效或白屏；content 路径需精确匹配文件，@tailwind 指令须按序置于 CSS 文件顶部，暗黑模式需手动添加 custom-variant 声明。

不能一概而论用哪套配置——create-react-app 项目和 vite 项目必须走完全不同的路径，混用会导致类名丢失、热更新失效或构建后白屏。

create-react-app 项目只能用 PostCSS 链路

这个脚手架不支持 Vite 插件，@tailwindcss/vite 直接报错或静默失效。你必须依赖 PostCSS 处理流程：

1. 安装时必须包含 postcss 和 autoprefixer：npm install -D tailwindcss postcss autoprefixer
2. npx tailwindcss init -p 会同时生成 tailwind.config.js 和 postcss.config.js
3. postcss.config.js 内容必须显式列出插件，不能省略：tailwindcss: {} 和 autoprefixer: {}
4. tailwind.config.js 的 content 字段要覆盖 index.html（CRA 默认用它做入口）：["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]

vite 项目优先用 @tailwindcss/vite 插件

Vite 最新插件绕过了 PostCSS，直接介入 CSS 构建阶段。老式 postcss.config.js 方式在这里反而会引发双重处理：

1. 只装两个包：tailwindcss 和 @tailwindcss/vite，且版本号必须严格对齐（如都是 v4.0.2）
2. vite.config.ts 中引入插件：import tailwindcss from '@tailwindcss/vite'，并加入 plugins 数组
3. 彻底删掉 postcss.config.js，也不要在 css.postcss.plugins 里再塞 tailwindcss()
4. content 路径写错不会立刻报错，但构建后所有类全被 purge —— 检查时务必确认 glob 表达式能真实匹配到你的 JSX 文件

@tailwind 指令顺序和位置不能错

无论哪种项目，主 CSS 文件（通常是 src/index.css）里这三行必须按顺序、紧挨着、且在最顶部：

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

如果中间穿插了 @layer 或自定义 CSS，部分工具链会跳过解析；如果写在 import 语句之后，Vite 插件可能无法识别上下文。

暗黑模式需要手动加 custom-variant

Tailwind 默认的 dark: 前缀依赖 :where(.dark, .dark *) 选择器，但 CRA 不支持该语法自动注入。Vite 项目也需显式声明：

1. 在 index.css 顶部加一行：@custom-variant dark(&:where(.dark, .dark *));
2. 否则 dark:bg-gray-800 类在手动切换时不会生效，只响应系统偏好
3. 这个声明必须放在所有 @tailwind 指令之前，否则会被忽略

最常被忽略的是 content 路径的精确性——它不是“大概扫一下”，而是构建时逐个读取文件内容提取类名。路径漏一个星号、少一个花括号，生产环境就等于没样式。