生产环境样式丢失主因是content路径未覆盖真实类名文件：tailwind v3+仅扫描content数组显式列出的源码文本，漏.tsx/.vue/html模板、第三方库路径、glob写法错误（如用非*）、动态类未进safelist或cli构建漏传--content参数均会导致样式被purgecss误删。
生产环境样式丢失，八成是 content 路径没配对——Tailwind v3+ 不猜你写了啥，只按你写的 glob 字符串去硬盘上硬扫源码文本，漏一个文件，对应类名就进不了最终 CSS。
content 数组漏了真实类名所在文件
Tailwind v3+ 不解析 import、不执行 JS、不读取运行时拼的字符串，只扫描 content 数组里明确列出的路径下的原始文件内容。漏掉一个 .tsx 或 .vue 文件，里面写的 bg-blue-500 就直接进垃圾箱。
- 必须显式写全扩展名：
"./src/**/*.{js,jsx,ts,tsx,html,vue}"，不能只写.js以为能覆盖 JSX/TSX - 静态 HTML 模板（如
public/index.html）也要加进content，否则里面的class="text-center"被当死代码删 - 用了 MDX、Astro、Svelte 组件？对应扩展名（
.mdx、.astro、.svelte）得手动补上 - 第三方 UI 库（如 DaisyUI、Flowbite）若以源码形式用在
node_modules里，其组件路径也得列进content，否则它们内部的btn-primary类照样消失
glob 写法错误导致路径根本没匹配到
Node.js 的 fast-glob 对路径大小写、斜杠方向、通配符层级极其敏感。写错一个字符，整片目录就扫不到。
-
**是递归匹配，*只匹配单层：写成"./src/*.{ts,tsx}"扫不到src/utils/helper.ts，得用"./src/**/*.{ts,tsx}" - Windows 下建议统一用
/分隔路径，避免\被转义；含空格的路径，每个--content值必须单独双引号包裹，比如--content "./pages/**/*.{js,ts}" --content "./components/**/*.{js,ts}" - 路径必须和磁盘上实际结构完全一致：项目里全是
.jsx，你却写.js，等于白配
动态 class 名没进 safelist，PurgeCSS 直接忽略
JSX 里 className={`p-4 ${isRed ? 'bg-red-500' : 'bg-gray-200'}`} 这种写法没问题，但 className={`from-${color}-500`} 中的 from-blue-500 整个字符串从未以字面量出现过，PurgeCSS 根本看不到。
- 简单场景：硬编码
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，它就只扫描默认的 ./src/**/*.{html,js,ts,jsx,tsx}，漏掉你实际放组件的目录。
- 常见错误写法：
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/CD 构建时工作目录不对，
--contentglob 匹配失败：本地跑得通，CI 上样式全丢？大概率是构建命令执行时pwd不是项目根目录，修复建议用绝对路径：--content "$PWD/src/**/*.{js,jsx,ts,tsx}"（Bash）
真正难的不是写正则或配 glob，而是搞清「哪些 class 是动态生成、哪些文件真写了 class、哪些路径在磁盘上实际存在」——这三件事没对齐，再细的配置也救不回被 PurgeCSS 删掉的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
