Tailwind JIT失效主因是content路径未覆盖JSX/TSX等含className的文件，导致静态扫描失败，进而退化为全量打包；需正确配置通配路径、排除动态插值、确保环境变量正确。
content路径没覆盖到JSX/TSX里的className字符串
Tailwind JIT不是靠运行时分析，而是靠静态扫描你content配置里列出的所有文件，从中提取完整的类名字面量。如果你的content只写了["./src/**/*.js"]，那所有.tsx、.jsx文件里的className根本不会被读取，JIT就“看不见”这些类，自然不生成对应CSS。
常见漏配情形：
-
content: ["src/App.tsx"]—— 只写入口文件，子组件、hooks、工具函数里的动态拼接全被忽略 -
content: ["./public/**/*.html"]—— 但项目用React/Vue，class全在JSX里，HTML里压根没class -
content: ["./src/**/*"]—— 缺少扩展名通配，Node.js默认不识别这种宽泛写法，实际扫描失败
正确写法示例（React + TS）：
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./index.html",
"./public/**/*.html"
]
动态拼接的类名（如bg-${color}-500）根本不会被JIT识别
JIT只认完整、静态、未拆分的类名字符串，比如bg-blue-500或text-[#ff6b6b]。一旦你把类名拆成变量插值，比如className={`text-${size}-font-bold`}，JIT在构建时看到的是text-和-font-bold两段，中间${size}是JS表达式，它无法执行、也无法猜测运行时值，结果就是：这个类不会进CSS输出，页面上也不生效。
这不是配置问题，是机制限制。能绕过的方式只有两种：
- 预定义所有可能组合，比如
size只可能是"sm"、"md"、"lg"，那就手动写死text-sm-font-bold等完整类，在content能扫到的地方显式出现一次 - 改用
style属性：style={{ fontSize: sizeMap[size] }}，把动态逻辑交给JS而非CSS类名
Vue SFC或MDX里<template></template>没被content包含
Vue单文件组件的<template></template>块、MDX里的 JSX 片段、甚至.astro中的 HTML 模板，都必须显式加进content数组，否则JIT完全不知道这些地方写了什么class。
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
典型错误：
- Vue项目只配了
./src/**/*.{js,ts}，漏掉.vue后缀 →<div class="flex p-4">白写 <li>使用Vite + Vue，但<code>content没包含./src/App.vue或./src/components/**/*.vue→ 组件样式丢失 - MDX文档站点，
content没列./src/content/**/*.mdx→ 文档中写的class="prose lg:prose-xl"不生效 - 运行
npx tailwindcss -v确认版本 ≥ 3.0.0 - 检查
process.env.NODE_ENV是否为development（开发时）或production（构建时） - 不要在
tailwind.config.js里写mode: 'jit'——v3已移除该字段，写了反而可能干扰内部判断 - 删掉旧包
@tailwindcss/jit，确保PostCSS插件列表里是tailwindcss，不是它的旧别名
补救方式：直接把项目里所有含class的文件类型都列全，宁可稍宽，别漏。
构建环境变量没设对，导致JIT退化为全量模式
Tailwind v3 的 JIT 引擎默认启用，但它是否真起作用，还取决于环境。如果NODE_ENV不是development或production，或者你手动设了TAILWIND_MODE=build，JIT可能跳过按需生成逻辑，回退到保守的全量打包——这时CSS体积暴涨，且新增类名也不会自动出现。
验证方法：
最易忽略的一点：某些CI环境或自定义脚本会重置NODE_ENV，导致本地正常、线上失效。建议在构建命令前显式声明：NODE_ENV=production npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify。
