tailwind样式不生效主因是content路径未覆盖tsx/jsx文件、postcss插件未加载或动态类名未被静态扫描到；需配置"./src/*/.{js,jsx,ts,tsx}"、使用@tailwindcss/postcss插件，并通过safelist预声明动态类名。
content 路径没覆盖到 TSX/JSX 文件，类名直接被忽略
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 规则。
这不是 bug，是为避免打包出几 MB 的全量 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 指令就是注释
哪怕 content 全对、类名全静态，如果 PostCSS 没调用 Tailwind 插件，@tailwind utilities 这行就只是纯文本，不会生成任何 CSS 规则。
关键检查点：
- Vite 用户：确认
postcss.config.js含require('@tailwindcss/postcss')，不是旧版require('tailwindcss') - CRA 用户：默认禁用自定义 PostCSS，需用
craco注入插件，或eject - Webpack 用户：检查
css-loader的modules是否开启 —— 开启后类名被哈希化，和 Tailwind 输出的原始类名对不上
Shadow DOM 或 Web Component 里类名存在但无样式
Shadow DOM 的样式隔离机制会让外部 CSS（包括 Tailwind 生成的全局样式表）默认无法穿透。DevTools 里能看到 class="p-4"，但 Computed 面板里查不到 padding，就是因为规则压根没进 Shadow Root。
必须手动注入：
- 确保
content覆盖了模板所在文件（如 Lit 的.ts），否则 JIT 根本不生成.p-4 - 在
connectedCallback或构造函数里动态插入 style 标签：const style = document.createElement('style'); style.textContent = tailwindCSSString; this.shadowRoot.appendChild(style); - 加
data-tailwind-injected防止重复注入 - 别用
mode: "closed"—— 它会彻底阻断shadowRoot.appendChild
真正容易被忽略的是：content 配置和样式注入是两件事，漏掉任一环节，Shadow DOM 里都只会显示“类名在、样式无”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
