tailwind 在 vite + react 项目中仅在构建后生成 css 文件于 dist/assets/，开发时无物理文件；若 build 后文件为空或搜不到已用类名，说明 jit 未提取到对应样式。
构建后去 dist/assets/ 里找 CSS 文件
Tailwind 在 Vite + React 项目中不会在开发时生成可查的物理 CSS 文件，它只在 npm run build 后把样式打包进 dist/assets/*.css。这个文件就是“最终 CSS”，但体积可能极小（比如 127 字节）甚至为空——那说明 JIT 没提取到任何类，不是没生成，而是生成了空内容。
检查方法很简单：
- 先确保已执行
npm run build（不是npm run dev） - 打开
dist/assets/目录，找最新生成的xxx.css文件（Vite 默认带 hash，如index.abc123.css） - 用文本编辑器打开它，搜索一个你确定用过的类名，比如
text-lg或bg-blue-500 - 如果搜不到，或文件大小 content 路径配置失败
用 Tailwind CLI 快速验证 content 是否生效
不用等完整构建，用 CLI 直连诊断最准。它能实时告诉你哪些类被扫到了，哪些被漏掉了：
- 运行命令：
npx tailwindcss -i ./src/input.css -o ./dist/test.css --watch -c ./tailwind.config.js - 确保
input.css包含三行：@tailwind base;、@tailwind components;、@tailwind utilities; - 在任意 JSX 文件里临时加个类，比如
className="debug-test bg-green-400" - 观察终端输出：如果只出现
.debug-test规则，但没.bg-green-400，说明content没覆盖到那个 JSX 文件 - 路径写错常见形式：
["src/**/*"]（缺扩展名）、["./src/**/*.{tsx}"]（少了个s）、["src/App.tsx"]（不递归子组件）
为什么开发时看不到最终 CSS？
开发服务器（vite dev）根本不会输出物理 CSS 文件。它用的是 JIT 的 runtime 注入机制：所有用到的类实时生成，直接塞进 <style></style> 标签挂到 里。你能在 DevTools 的 Elements 面板看到这些内联样式，但它们不存在于文件系统中。
这种机制带来两个关键影响：
-
npm run dev正常 ≠ 生产正常：开发时样式全有，不代表build后也有 - 不能靠刷新浏览器判断样式是否“真正生效”，得看构建产物
- 如果你依赖外部工具分析 CSS（比如 Lighthouse、CSS coverage），必须基于
dist中的文件，而不是 localhost 页面源码
动态类名导致样式丢失，怎么确认是不是它的问题？
像 className={`text-${size}-lg`} 这种写法，JIT 扫描器完全无法推断 size 的值，会直接跳过，结果就是上线后文字大小没了。
验证方式很直接：
- 在某个被
content覆盖的文件里，硬编码一个冷门但合法的类，比如className="bg-hotpink"（Tailwind 默认不包含这个颜色） - 跑
npm run build，然后grep -o "bg-hotpink" dist/assets/*.css - 如果输出非空，说明 JIT 没启动，还在全量打包；如果为空，说明 JIT 已启用，但你的动态类没被识别
- 这时就得加
safelist，比如/^bg-(hotpink|blue|gray)-[0-9]+$/，注意结尾加$防止误匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
