tailwind样式不生效主因是content路径未覆盖tsx/jsx文件、postcss插件未加载或动态类名未被静态扫描到；需配置"./src/*/.{js,jsx,ts,tsx}"、使用@tailwindcss/postcss插件，并通过safelist预声明动态类名。
content 路径没覆盖到你的组件文件
Tailwind 不是运行时解析 class 字符串，而是在构建阶段扫描源码里**字面量出现的类名**。如果 tailwind.config.js 的 content 字段没匹配到你的组件文件，bg-blue-500 这种写法就根本不会进最终 CSS —— DOM 里能看到 class，但浏览器查不到规则。
-
content: ["./src/*.js"]→ 漏掉.tsx和嵌套目录，等同于排除全部 React 组件 -
content: ["../src/App.tsx"]→ glob 不支持相对路径写法，Tailwind 直接跳过 -
content: ["./public/index.html"]→ Vite 默认不扫描public/下的 HTML，需手动加进配置
正确写法（React + TSX）：
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html"
]
若用 MDX、Astro 或 Lit，也得加进去，比如 "./src/**/*.mdx" 或 "./src/**/*.ts"（Lit 的模板在 TS 字符串里）。
动态类名如 from-${color}-500 总是失效
Tailwind 静态扫描只认字面量，from-blue-500 出现在代码里才会计入；from-${color}-500 这种插值写法，构建时根本看不到完整类名，自然不生成 CSS 规则。
- 把高频组合预定义成对象：
const bgClasses = { primary: 'from-blue-500', danger: 'from-red-500' } - 用
safelist显式声明：safelist: ['from-blue-500', 'from-red-500', /from-[a-z]+-500/]（正则必须用斜杠包裹） -
safelist是数组，不是字符串；写成'/from-[a-z]+-500/'会当普通字符串处理，无效
PostCSS 插件没加载或被覆盖
Tailwind 本质是 PostCSS 插件，必须嵌入构建流程。常见断裂点：
- Vue CLI 项目中删了
postcss.config.js或没在vue.config.js里注入plugins: [require('tailwindcss'), require('autoprefixer')] - Umi v4+ 项目用了原生
tailwindcss包，而非@umijs/plugin-tailwindcss，导致 loader 注入时序冲突 - 根目录存在
postcss.config.js，会完全接管 PostCSS 实例，跳过 Umi/Vite 等框架内置的 Tailwind 插件
验证方式：npm list @umijs/plugin-tailwindcss（Umi）、检查 postcss.config.js 是否存在且内容合理、确认构建命令是否触发 PostCSS 处理。
改完配置后样式还是没变
Tailwind 配置变更不会热更新，必须重启开发服务器 —— Node.js 缓存模块、PostCSS 不重新扫描、开发服务器监听失效，都可能导致旧 CSS 持续生效。
- 停止当前服务（
Ctrl+C），再执行npm run dev或对应启动命令 - 浏览器硬刷新（
Ctrl+F5），清掉 CSS 缓存 - Network 面板确认加载的 CSS 文件时间戳已更新，且响应体里真有
.bg-blue-500{...} - 检查 DOM 元素上是不是写了
clas而不是class—— 拼错属性名会让所有工具类彻底失效
最隐蔽的问题往往藏在路径大小写、斜杠方向、glob 通配层级这些细节里，而不是配置逻辑本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
