生产环境样式丢失的根本原因是tailwind未扫描到对应class字符串。需确保tailwind.config.js的content数组覆盖所有含class的文件路径，动态类名须加入safelist，cli命令需显式传入--content参数，@apply必须置于正确@layer中。
生产环境样式丢失，基本就是 content 没扫到你写的 class —— Tailwind 不执行 JS，不解析 import，只认源码里明明白白写着的字符串，漏一条路径，对应类就直接从 CSS 里消失。
tailwind.config.js 的 content 数组是否覆盖所有含 class 的文件
Tailwind v3+ 完全依赖 content 字段扫描源码，不再读 purge，也不自动推导。漏掉一个扩展名或目录，bg-blue-500 这种写法就不会进最终 CSS。
- 写了
"./src/**/*.{js,ts}"，但组件是.tsx或.vue？必须显式加上tsx和vue - 用了
public/index.html写静态 class？得加进content，比如"./public/**/*.html" - 第三方 UI 库（如 DaisyUI）的组件在
node_modules里？手动列进去，例如"./node_modules/daisyui/dist/**/*.js" - 路径大小写、斜杠方向、
**和*层级必须和磁盘上完全一致；Windows 下统一用/更稳
动态拼接的 class（如 text-${color}-500）是否进了 safelist
PurgeCSS 匹配的是源码里的字面量字符串，不是运行时拼出来的结果。JSX 中 className={`bg-${theme}-500`} 这种写法，源码里根本没出现完整类名，必然被删。
- 简单场景：硬编码
safelist: ['bg-red-500', 'text-blue-600'] - 多变体推荐正则：
{ pattern: /text-(red|blue|green)-(500|600)/ } - 响应式前缀要显式包含：
/^(md|lg):text-(red|blue)-500$/，只写text-red-500会漏掉md:text-red-500 - 避免
.*结尾：/text-.*/会意外匹配text-clip这类原生属性
构建命令里是否漏传 --content 参数或路径错位
如果你没走框架封装（如 Vite/Next.js 插件），而是直接调用 tailwindcss CLI，命令里没写 --content，它就只扫描默认路径，大概率漏掉你的实际组件目录。
- 常见错误写法：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify（缺--content） - 正确做法：把
tailwind.config.js里content数组的内容，原样塞进命令，每个路径单独用双引号包裹：--content "./pages/**/*.{js,ts}" --content "./components/**/*.{js,ts}" - CI 构建时工作目录不对？改用绝对路径：
--content "$PWD/src/**/*.{js,ts,jsx,tsx}"（Bash） - 别用
npm run build封装多层脚本——每层都可能改变cwd，直接暴露 CLI 命令更可控
@apply 规则是否放在了正确的 @layer 里
开发环境正常、生产环境消失，大概率是你把 @apply 写在了裸 .btn-primary 规则里，没声明层级。Tailwind 的扫描器无法建立“这个 CSS 规则用了哪些工具类”的关联，就当它们没被用过，直接删掉。
- 错误写法：
.btn-primary { @apply px-4 py-2 bg-blue-600; } - 正确写法：
@layer components { .btn-primary { @apply px-4 py-2 bg-blue-600; } } -
@layer components必须放在@tailwind components之后，且整个块应置于主 CSS 文件（如globals.css）中 - 别用
@layer utilities放组件样式——它专为工具类扩展设计，顺序和作用域都不同
最常被忽略的点是：Tailwind 扫描的是你写的源码字符串，不是浏览器最终渲染的 DOM class。哪怕 className={isRed ? "text-red-500" : "text-gray-400"} 这种三元表达式能被识别，只要 isRed 是变量而非字面量，就得进 safelist——这里没有魔法，只有显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
