根本原因只有一个：tailwind 没在源码里“看见”你写的 class 字符串。它不执行 js，不解析 import，只靠 content 数组里列的路径去硬扫文本——漏一条，对应类就彻底消失。
根本原因只有一个：Tailwind 没在源码里“看见”你写的 class 字符串。它不执行 JS，不解析 import，只靠 content 数组里列的路径去硬扫文本——漏一条，对应类就彻底消失。
content 路径没覆盖真实文件位置
这是最常踩的坑。Tailwind v3+ 完全依赖 content 字段扫描原始文件内容，写错一个字符、少一个后缀，整个目录就等于不存在。
-
./src/**/*.{js,ts}会漏掉所有.tsx、.jsx、.vue文件——必须显式加上，比如./src/**/*.{js,jsx,ts,tsx,vue} - 用了
public/index.html写静态 class？得单独加进content：./public/**/*.html - 第三方库（如 DaisyUI）的组件逻辑在
node_modules里？手动列进去：./node_modules/daisyui/dist/**/*.js - 路径大小写、斜杠方向、
**和*层级必须和磁盘上完全一致；Windows 下统一用/更稳
动态拼接的 class 没进 safelist
像 className={`text-${color}-500`} 这种写法，源码里实际只有 text-${color}-500 这个模板字符串，不是完整类名。PurgeCSS 不推测、不执行，直接跳过。
- 固定组合可硬编码：
safelist: ['text-red-500', 'bg-blue-600'] - 多变体推荐正则：
{ pattern: /text-(red|blue|green)-(500|600)/ }（注意必须用斜杠包裹，不是字符串） - 响应式前缀要显式包含：
/^(md|lg):text-red-500$/，只写text-red-500会漏掉md:text-red-500 - 避免
.*结尾：/text-.*/可能意外匹配text-clip这类原生属性
CLI 构建时漏传 --content 参数
如果你没走 Vite/Next.js 等框架封装，而是直接调 tailwindcss CLI，那命令里没写 --content 就等于没配 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）
最容易被忽略的是：Tailwind 匹配的是源码里的字面量字符串，不是 DOM 渲染后的 class 属性。哪怕你在浏览器里看到 class="bg-blue-500"，只要这个字符串没在某个可扫描文件里明明白白写着，它就不会出现在最终 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
