Tailwind CSS v3+构建时样式丢失，主因是content路径未精确覆盖所有含类名文件、动态类名未用safelist显式声明、或残留purge配置导致裁剪静默失效。
React组件里的Tailwind类名被清除，不是构建出错，而是Tailwind在构建时压根没“看见”你写的那些类——它只认源码里完整、静态、字面量存在的字符串，动态拼接的类名（比如text-${color}-600）根本不会被提取，自然也不会生成对应CSS规则。
content路径没覆盖到你的React组件文件
Tailwind v3+ 不再全局扫描，只按content数组里写的路径去读文件内容。漏掉一个路径，里面用的类就全丢。
-
content必须显式包含./src/**/*.{ts,tsx}，不能只写./src/**/*（缺少扩展名，匹配失败） - Next.js App Router项目，
app/**/*.{ts,tsx}也得单独加进去，否则app/layout.tsx里的flex-col就没了 - 用了MDX或自定义组件库？
**/*.mdx或node_modules/@my/ui/**/*.js也要列进content - 路径写错（比如
./components/**/*但实际是./src/components/**/*），构建不报错，但CSS体积不变——它 fallback 到全量输出，静默失效
动态类名没被静态识别，又没配safelist
Tailwind不执行JS，也不展开模板字符串。它看到的是from-${type}，不是from-blue-500。只要源码里没出现完整字符串，这个类就不会进最终CSS。
-
className={`bg-gradient-to-b from-${mainColor} to-${secondaryColor}`→ 构建后无样式，因为from-blue-500没在任何地方作为字面量出现 - 响应式前缀也要显式声明：
/^(md|lg):text-red-500$/，光写text-red-500不够，md:text-red-500会被当未使用删掉 -
safelist用正则要克制：/^text-(red|blue|green)-\d+$/安全；/text-.*/会把所有text-类都拉进来，体积暴增
旧版purge配置残留导致裁剪逻辑静默失效
如果你还在tailwind.config.js里留着purge字段，v3+ 会直接报错或忽略它——既不警告，也不 fallback，结果就是你以为关了tree-shaking，其实裁剪照常运行，只是路径错了而已。
立即学习“前端免费学习笔记（深入）”；
- 检查配置文件，删掉所有含
purge的行，包括purge: { enabled: false }和purge: ['./src/**/*'] - 确认构建命令走的是生产模式：
vite build或next build，而不是vite dev——开发服务器用JIT实时编译，不依赖content，所以本地正常、上线崩 - 第三方UI库（如
@headlessui/react）内部用了Tailwind类，但没加进content，它们的类也会被清掉
最麻烦的不是类名消失，而是它消失得毫无提示：DOM里class属性看着完全正确，开发者工具里却查不到对应CSS规则。问题往往卡在content路径是否精确、safelist是否覆盖变体、以及有没有残留的purge配置这三处，缺一不可。
