tailwind样式不生效主因是content路径未覆盖tsx/jsx文件、postcss插件未加载或动态类名未被静态扫描到；需配置"./src/*/.{js,jsx,ts,tsx}"、使用@tailwindcss/postcss插件，并通过safelist预声明动态类名。
查不到样式，说明浏览器压根没加载或解析到那条规则——不是被覆盖，是根本不存在。Tailwind 的类名写了，但 display: flex 连 Computed 面板都不出现，就是构建阶段就丢了。
content 路径没扫到你的文件
Tailwind 不运行 JS，只静态扫描源码里明明白白写着的类名字符串。路径配错，类就直接从 CSS 里蒸发。
-
content: ["./src/*.js"]→ 漏掉.tsx、.vue、.html，React/Vue/Svelte 组件全失效 -
content: ["../src/App.tsx"]→ glob 不支持上层相对路径，Tailwind 直接跳过该条 -
content: ["./public/index.html"]→ Vite 默认不扫描public/，得手动加进配置，且确保文件真实存在 - 正确写法（React + TSX）：
["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]
@tailwind 指令被当注释处理
如果 PostCSS 没调用 Tailwind 插件，@tailwind utilities 就是一行纯文本，不会生成任何 CSS 规则。
- Vite 用户：检查
postcss.config.js是否用了require('@tailwindcss/postcss')，不是旧版require('tailwindcss') - CRA 用户：默认禁用自定义 PostCSS，必须用
craco注入插件，或eject - Webpack 用户：确认
css-loader的modules未开启 —— 开启后类名被哈希化，和 Tailwind 输出的原始类名对不上 - 最直接验证：运行
npm run build，打开dist/assets/*.css，搜索.flex或.text-，看是否存在
@layer 和 @tailwind 顺序错乱
这类问题不报错，但基础样式静默失效。比如 h1 { @apply text-4xl; } 完全没效果，就是因为 @layer base 没紧接在 @tailwind base 后面。
- 错误顺序：
@tailwind base→ 其他 CSS →@layer base→@tailwind components - 正确顺序：
@tailwind base→@layer base→@tailwind components→@layer components - 若用了
@import 'tailwindcss/base.css'，要确认它真被加载（Vite + CSS-in-JS 场景下容易漏） - DevTools 的
Styles面板里搜h1，如果连重置规则都没出现，大概率是这个原因
Shadow DOM 或 Web Component 里样式隔离
外部 CSS 不会穿透 Shadow DOM 边界。class="p-4" 在元素上可见，但 padding: 1rem 就是不生效——浏览器压根不尝试匹配。
-
<link>和@import在 shadowRoot 内部完全无效 - 必须把编译后的 CSS 字符串手动注入：
shadowRoot.innerHTML = '<style>' + tailwindCSSString + '</style>' - 注入前确认
shadowRoot.mode === 'open'；'closed'会让appendChild()静默失败 - 注入时机必须在元素挂载前，且防重复（例如加
data-tailwind-injected标记判断） - content 配置仍需覆盖模板文件，否则注入的 CSS 字符串里根本没你写的类
最常被忽略的是 content 路径和 PostCSS 插件加载这两环——它们出问题，后续所有调试都建立在虚假前提上。先确认 dist/output.css 里真有你要的类，再谈浏览器里查不查得到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
