Tailwind CSS 在 React 项目中不会自动生效，必须显式配置构建链路并精确声明类名来源路径；漏配 content 或用错插件（如在 Vite 里配 postcss.config.js），build 后样式就直接消失。
Tailwind CSS 在 React 项目中不会自动生效，必须显式配置构建链路并精确声明类名来源路径；漏配 content 或用错插件（比如在 Vite 里配 postcss.config.js），build 后样式就直接消失。
content 配置必须写全扩展名和真实路径
Tailwind 的 JIT 模式靠静态扫描文件内容提取类名，它不解析别名、不猜测扩展名、不读取未声明的文件类型。漏一个扩展名，对应文件里的 className 就进不了最终 CSS。
-
"./src/**/*"❌ —— 不会打开.tsx或.jsx文件，类名被 purge -
"./src/**/*.{js,jsx,ts,tsx}"✅ —— 显式覆盖所有可能含className的源码变体 -
"./public/index.html"✅ —— 如果你在 HTML 里写了class="bg-gray-100"（比如 SSR landing page），不加这行，HTML 中的类也会丢 -
"@/components/**/*"❌ —— 别名路径无效，得写成"./src/components/**/*.{js,jsx,ts,tsx}"
Vite 和 CRA 必须走不同插件路径
构建工具决定你该用哪套机制，混搭会导致插件不生效、双重处理或热更新异常。
- Vite 项目（
npm create vite@latest创建）：装tailwindcss+@tailwindcss/vite，在vite.config.ts里加tailwindcss()插件，postcss.config.js完全不用配 - CRA 或 Webpack 项目（
npx create-react-app）：装tailwindcss+postcss+autoprefixer，配postcss.config.cjs，@tailwindcss/vite装了也白装 - Next.js 13+（App Router）：走 PostCSS 流程，但
content必须包含"app/**/*.{js,jsx,ts,tsx}"，否则路由组件里的类名扫不到
动态 class 名必须硬编码或进 safelist
Tailwind 不执行 JS，只做字符串匹配。任何运行时拼接的变量都会被跳过，导致生产环境样式丢失。
-
className={`text-${color}-500`}❌ ——color是变量，插件扫不到完整类名text-red-500 -
className={isActive ? 'bg-blue-500' : 'bg-gray-200'}✅ —— 两种完整类名都硬编码在源码中，能被识别 -
className={clsx('p-4', isPrimary && 'bg-blue-500')}⚠️ ——clsx大多数情况可识别，但自定义工具函数或嵌套三元可能失效 - 补救方式：把可能用到的动态组合加进
safelist，例如['text-red-500', 'text-blue-500']或正则/^text-(red|blue|green)-500$/
最常被忽略的是 content 里漏掉 .html 或别名路径写成真实路径——这两处一错，build 后白屏或局部样式失效，但开发时一切正常，排查起来特别容易绕弯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
