Tailwind CSS 的 content 路径是否被读取，关键在于配置文件是否被 CLI 或构建工具实际加载：若未显式指定 -c 或 configPath，则默认不生效；需用 npx tailwindcss -c ./tailwind.config.js 验证是否存在及路径是否正确，再检查 glob 是否真实匹配文件、扩展名是否齐全、动态类是否加入 safelist，最后确认构建产物是否真走 JIT 模式而非全量输出。
tailwind.config.js 的 content 路径是否被 CLI 或构建工具实际读取
很多问题根本不在路径写法，而在配置压根没加载——Tailwind CLI 默认不自动找 tailwind.config.js，Vite/Next.js 插件也可能因路径错位跳过它。运行构建命令时没加 -c 或没传 configPath，就等于没配。
验证方式很简单：在终端里手动触发一次 JIT 扫描，强制指定配置文件：
npx tailwindcss -i ./src/input.css -o ./dist/test.css -c ./tailwind.config.js --watch
如果报错 Cannot find config file，说明路径不对或文件位置错了；如果命令跑通但输出 CSS 里没有你预期的类（比如写了 bg-blue-500 却没生成），那才是 content 路径本身的问题。
- 确保
tailwind.config.js在项目根目录，或用path.resolve(__dirname, ...)构造绝对路径（Monorepo 必做） - Vite 用户检查
tailwindcss({ configPath: ... })是否显式传入 - Next.js App Router 项目中，
app/**/*和pages/**/*得分开写，不能只写一个
content glob 是否真实匹配到含类名的文件
写对了路径 ≠ 扫到了文件。Tailwind 只扫描 content 数组里**能被 glob 正确解析且磁盘上真实存在**的路径。漏扩展名、多一个点、大小写不一致、斜杠方向错误，都会让整片目录失效。
常见失效写法：
-
["./src/**/*.{js,ts}"]→ 漏掉.jsx和.tsx，React 组件里的类全丢 -
["src/**/*"]→ 缺少扩展名，Tailwind 直接忽略该条目 -
["./src/**/*.{TSX}"]→ Windows 下可能侥幸通过，Linux/macOS 下完全不匹配 -
["./public/index.html"]→ 路径实际是./src/index.html，白写
快速验证：在你认为“应该被扫到”的文件里，临时加一个生僻类名，比如 class="debug-scan-test"，然后看构建后 CSS 里有没有 .debug-scan-test。没有？那这条路径就没生效。
动态类名是否被 safelist 显式兜底
Tailwind 不执行 JS，className={`text-${color}-500`} 这种写法在构建阶段就是个字符串模板，里面 text-red-500 根本没作为字面量出现过，JIT 引擎直接跳过。
别用宽泛正则救火，容易引入冗余样式：
- 错：
/text-.*/→ 匹配到原生 CSS 属性text-overflow，也塞进去了 - 错：
/^text-/→ 把全部text-类都保留，体积立刻翻倍 - 对：
/^text-(red|blue|green)-(500|600)$/→ 精确控制变体，结尾$防止误匹配text-red-5000 - 对：
['md:text-lg', 'lg:text-xl']→ 响应式前缀必须显式列出，text-lg不会自动带出md:text-lg
更稳的方案是改用 @apply 封装，在 src/components.css 里写 .btn-primary { @apply bg-blue-500 text-white; }，再把这个 CSS 文件加进 content 数组。
构建产物是否真走 JIT 模式（而不是 fallback 全量输出）
体积大 ≠ 配置错，可能是 JIT 根本没启动。Tailwind v3+ 默认启用 JIT，但一旦 content 配置为空、路径全错或解析失败，它会静默退化为全量模式——你会看到输出 CSS 里有 first-letter:font-bold、bg-gradient-to-br 这种项目里根本没写的类。
验证 JIT 是否生效最直接的办法：
- 生产构建后，用
grep -c "bg-blue-500" dist/assets/*.css查你明确用过的类是否存在 - 同时
grep -c "bg-emerald-950" dist/assets/*.css（这个类你几乎肯定没用）——如果结果非零，说明 JIT 失效，正在输出全量 CSS - 检查构建日志里有没有
Content paths not found或No files found matching类警告
真正容易被忽略的是：哪怕 content 数组里只有一条路径生效，其余全错，JIT 仍会工作；但只要所有路径都扫不到任何文件，它就彻底放弃按需提取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
