tailwind样式不生效主因是content路径未覆盖源文件或动态类名未被静态扫描识别，需确保content精确匹配所有含class的文件路径（如"./src/*/.{js,jsx,ts,tsx}"），并为动态类名配置safelist。
样式不生效，八成不是类名写错了，而是 Tailwind 根本没生成对应 CSS 规则——它只扫描你明确告诉它的文件路径，漏一个 .tsx 或写错 glob 通配符，bg-blue-500 就直接从最终 CSS 里消失。
content 路径没覆盖到源文件，类名被 Purge 掉了
Tailwind 不执行 JS、不解析 import、不猜你写了啥，只按 content 数组里写的路径去硬盘上硬扫文本。漏掉就等于没写。
-
content: ["./src/*.js"]→ 漏掉所有.tsx和嵌套目录，React 组件全失效 -
content: ["./src/**/*"]→ 缺扩展名，插件无法识别 JSX/TSX 中的className字符串 -
content: ["./public/index.html"]→ Vite 默认不扫public/，必须手动加进去才生效 - 正确写法（React + TSX）：
content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]
动态类名如 from-${color}-500 始终不生效
这类字符串在源码里从未以完整字面量出现过，Purge 阶段直接跳过，不会生成任何 CSS 规则。
- 不要指望运行时拼接能被扫描到，这是设计使然，不是 bug
- 高频组合建议预定义对象：
const bg = { primary: 'from-blue-500', danger: 'from-red-500' } - 或用
safelist显式声明：safelist: ['from-blue-500', { pattern: /from-[a-z]+-500/ }]（注意正则必须是斜杠包裹，不是字符串） -
/from-.*/这种写法太宽泛，可能意外匹配原生 CSS 属性，引入冗余样式
@tailwind 指令顺序错或 PostCSS 插件没加载
@tailwind base、@tailwind components、@tailwind utilities 的顺序决定 CSS 优先级；而如果 PostCSS 根本没调用 Tailwind 插件，这些行就只是注释。
- 确保
postcss.config.js里是require('@tailwindcss/postcss')，不是旧版require('tailwindcss') - CRA 用户默认禁用自定义 PostCSS，需用
craco注入，或eject -
@tailwind base必须在最前，@tailwind utilities必须在最后，中间夹@tailwind components—— 顺序颠倒会导致md:w-64被.w-64覆盖 - Shadow DOM 或 Web Component 里类名存在但无样式？那是样式隔离机制导致的，Tailwind 输出的规则根本进不去作用域
Go / Laravel / UniApp 等非标准环境容易忽略的点
不同运行时对静态资源、构建链、样式注入的支持差异极大，不能套用 Webpack/Vite 的默认逻辑。
- Go 的
net/http服务：必须用http.ServeFile显式注册路由，比如http.HandleFunc("/styles/tailwind", ...)，否则浏览器请求/styles/tailwind会返回 HTML 或 404 - Laravel Blade 模板：
@vite必须是中第一个资源加载指令，前面不能有<link rel="stylesheet">，否则custom.css会覆盖 Tailwind 规则 - UniApp 小程序平台：不支持动态样式注入，
@apply不会被编译，全局样式需手动@import到每个组件，且 scoped 下类名需穿透处理
最容易被忽略的是：content 路径必须和磁盘上实际结构完全一致，大小写、斜杠方向、通配符层级差一个字符，整片目录就扫不到；还有 Windows 下路径含空格时，每个 --content 参数必须单独用双引号包裹，否则 CLI 直接报错或静默跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
