Tailwind CSS在Vite+React中不生成独立可查的CSS文件，开发时动态注入style标签，生产构建后样式打包进dist/assets/*.css；若该目录无CSS或体积极小，主因是tailwind.config.js中content路径未覆盖TSX/HTML等实际用类文件，导致按需提取失败。
Tailwind CSS 本身不生成“可手动查找的独立 CSS 文件”——它只在构建时按需注入样式。所谓“没生成 CSS 文件”，通常是误判了构建产物位置，或 content 路径配置错误导致提取失败，最终输出为空。
为什么 build 后 dist/assets/ 下没有 CSS？
根本原因不是 Tailwind “没编译”，而是它没提取到任何类名，输出 CSS 为空（0 字节或极小体积），Vite/Webpack 可能直接跳过写入该文件。常见诱因是 content 配置路径未覆盖实际使用类名的文件。
-
content中的 glob 模式必须匹配你写className的所有源文件，比如 React 组件在src/pages/，但配置里只写了./src/**/*.{js,ts}，漏了.tsx，就会完全不扫描 JSX/TSX 文件 - 路径是相对于
tailwind.config.js所在目录的，写src/**/*前要确认 config 文件确实在项目根目录；若 config 在config/tailwind.config.js，就得写../src/**/* - Vite + React 项目中，
index.html也常写 class（如class="bg-gray-50"），但很多人忘了把它加进content，尤其当用public/index.html时，路径应为./public/index.html
如何快速验证 content 路径是否生效？
不用等完整构建，用 Tailwind CLI 的 --watch 模式直连诊断：
npx tailwindcss -i ./src/input.css -o ./dist/test.css --watch
然后在 ./src/input.css 里临时加一行：.debug-class { color: red }，再在任意 JSX 文件中用 className="debug-class bg-blue-500"。如果终端输出里出现 bg-blue-500 被提取，说明路径通；如果只有 debug-class 出现、bg-blue-500 没影，就是 content 没扫到那个 JSX 文件。
- 确保
input.css中有完整的三行：@tailwind base;、@tailwind components;、@tailwind utilities; - CLI 默认不读
tailwind.config.js，加-c ./tailwind.config.js参数才能加载你的配置 - 若用 Vite，更推荐直接跑
npm run build后检查dist/assets/*.css文件大小——空文件或127 B就基本确认提取失败
常见 content 路径错误示例
这些写法看着合理，但实际会失效：
-
["src/**/*"]→ 缺少扩展名，Tailwind 不识别，必须写成["src/**/*.{js,ts,jsx,tsx,html}"] -
["./src/**/*.{tsx}"]→ 少了个s，写成.tsx才对；注意大小写，Windows 可能不敏感，Linux/macOS 严格区分 -
["src/App.tsx"]→ 单文件写法只扫描这一个，新增组件就漏掉，应保持通配 -
["./src/**/*.{js,ts}"]→ React 项目里 JSX/TSX 是主力，漏掉jsx和tsx等于没配
真正稳妥的写法（Vite + React）：["./src/**/*.{js,ts,jsx,tsx}", "./public/index.html"]。
build 后 CSS 文件体积异常小（
这比“完全没文件”更危险——说明构建流程走通了，但提取逻辑卡在了第一步。重点检查两处：
- 确认所有用到 Tailwind 类名的文件，其路径都落在
contentglob 范围内；用 VS Code 全局搜索className=，把结果文件路径逐个对照 - 检查是否有语法错误阻断扫描：比如 JSX 文件里写了
className="flex p-4 {someDynamic}"，大括号内表达式若含非法字符（如未闭合引号），PostCSS 解析器可能静默跳过整个文件 - 某些构建工具（如 Umi）会劫持 PostCSS 链，导致 Tailwind 插件未被调用；此时需禁用内置样式插件，改用标准 PostCSS 配置
最易忽略的一点：Tailwind v3.0+ 默认启用 JIT 模式，它只提取 content 中明确出现的字符串。动态拼接类名（如 className={`p-${size}`}）不会被识别，必须用 safe-list 显式声明，否则这部分样式永远进不了输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
