生产环境样式丢失主因是 Tailwind v3+ 的 content 配置未覆盖所有含 class 的源码路径，需精确声明 glob 模式、扩展名、大小写及斜杠方向，并验证扫描结果。
生产环境样式丢失，基本可以断定是 content 配置没覆盖到你写 class 的地方——Tailwind v3+ 不执行 JS、不解析模板、不递归 import，只按 content 数组里写的 glob 字符串去硬盘上硬扫源码文本，漏一个文件，对应类名就进不了最终 CSS。
tailwind.config.js 的 content 路径没写全
这是最常见原因。Tailwind 不会“猜”你用了哪些类，只看你让它扫哪几个路径。漏掉扩展名、目录或大小写错位，都会导致扫描失败。
- 写了
"./src/**/*.{js,ts}"，但组件是.tsx或.vue？必须显式加上："./src/**/*.{js,jsx,ts,tsx,vue}" - 用了
public/index.html写静态 class？得加进："./public/**/*.html" - 项目含 MDX、Astro、Svelte 组件？对应后缀
.mdx、.astro、.svelte也得手动补上 - 第三方库（如 DaisyUI）以源码形式存在
node_modules中？要列进去："./node_modules/daisyui/dist/**/*.js" - Windows 下路径用反斜杠
\可能被转义，统一用正斜杠/更稳；含空格的路径，每个--content值必须单独双引号包裹
动态拼接的 class 名没进 safelist
PurgeCSS 匹配的是源码中**字面量出现的完整字符串**，不是运行时拼出来的结果。JSX 中 className={`text-${color}-500`} 这种写法，源码里根本没出现 text-blue-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属性
@apply 没放在 @layer components 块里
Tailwind 扫描器无法建立“这个 CSS 规则用了哪些工具类”的关联。裸写 .btn-primary { @apply px-4 py-2 bg-blue-600; }，构建时直接当未使用删掉。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：在
Button.css或任意非主 CSS 文件中直接写@apply - 正确写法：所有带
@apply的自定义类，必须包裹在主 CSS 入口（如globals.css）中的@layer components块内，且该块需放在@tailwind components之后 - 别用
@layer utilities放组件样式——它专为工具类扩展设计，顺序和作用域都不同
构建命令漏传 --content 参数或路径错位
如果你没走 Vite/Next.js 插件链，而是直接调用 tailwindcss CLI，那命令里没写 --content 就等于没配——它只会扫默认路径 ./src/**/*.{html,js,ts,jsx,tsx}，大概率漏掉你实际放组件的目录。
- 错误写法：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify（缺--content） - 正确做法：把
tailwind.config.js里content数组的内容，原样塞进命令，每个值单独双引号包裹：--content "./src/**/*.{js,jsx,ts,tsx}" --content "./public/**/*.html" - CI 构建时
pwd不是项目根目录？改用绝对路径：--content "$PWD/src/**/*.{js,ts}"（Bash） - 删掉所有残留的
TAILWIND_MODE=build环境变量——v3.3+ 已弃用，留着反而干扰 JIT
最容易被忽略的点是：路径必须和磁盘上实际结构**完全一致**——大小写、斜杠方向、** 和 * 的层级、扩展名拼写，错一个字符，整片目录就扫不到。别依赖“应该扫到了”，用 npx tailwindcss --dry-run --content "./src/components/**/*.{tsx}" 快速验证是否真能命中文件。
