create-react-app 项目必须用 PostCSS 链路，vite 项目优先用 @tailwindcss/vite 插件；二者不可混用，否则导致类名丢失、热更新失效或白屏；content 路径需精确匹配文件，@tailwind 指令须按序置于 CSS 文件顶部，暗黑模式需手动添加 custom-variant 声明。
不能一概而论用哪套配置——create-react-app 项目和 vite 项目必须走完全不同的路径，混用会导致类名丢失、热更新失效或构建后白屏。
create-react-app 项目只能用 PostCSS 链路
这个脚手架不支持 Vite 插件，@tailwindcss/vite 直接报错或静默失效。你必须依赖 PostCSS 处理流程：
- 安装时必须包含
postcss和autoprefixer：npm install -D tailwindcss postcss autoprefixer -
npx tailwindcss init -p会同时生成tailwind.config.js和postcss.config.js -
postcss.config.js内容必须显式列出插件，不能省略：tailwindcss: {}和autoprefixer: {} -
tailwind.config.js的content字段要覆盖index.html（CRA 默认用它做入口）：["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]
vite 项目优先用 @tailwindcss/vite 插件
Vite 官方插件绕过了 PostCSS，直接介入 CSS 构建阶段。老式 postcss.config.js 方式在这里反而会引发双重处理：
- 只装两个包：
tailwindcss和@tailwindcss/vite，且版本号必须严格对齐（如都是v4.0.2） -
vite.config.ts中引入插件：import tailwindcss from '@tailwindcss/vite'，并加入plugins数组 - 彻底删掉
postcss.config.js，也不要在css.postcss.plugins里再塞tailwindcss() -
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 项目也需显式声明：
- 在
index.css顶部加一行：@custom-variant dark(&:where(.dark, .dark *)); - 否则
dark:bg-gray-800类在手动切换时不会生效，只响应系统偏好 - 这个声明必须放在所有
@tailwind指令之前，否则会被忽略
最常被忽略的是 content 路径的精确性——它不是“大概扫一下”，而是构建时逐个读取文件内容提取类名。路径漏一个星号、少一个花括号，生产环境就等于没样式。
