Tailwind样式不生效主因是content路径未覆盖TSX/JSX文件、@layer层序错位、动态类名未被静态扫描或CSS Modules中PostCSS插件顺序错误；需配置"./src/*/.{js,jsx,ts,tsx}"、将自定义样式置于@layer components并确保@tailwind utilities在后、用safelist预声明动态类、按正确顺序加载postcss-modules与tailwindcss插件。
React 项目里 Tailwind 类写对了、DOM 上也出现了，但样式就是不生效——大概率不是你漏写了类，而是 CSS 层叠顺序、作用域隔离或构建阶段裁剪出了问题。
content 配置没扫到 JSX/TSX 文件，类名根本没进最终 CSS
Tailwind 不是运行时查 DOM，它只在构建时扫描源码里“字面量出现”的类名。如果你的 tailwind.config.js 里 content 字段漏掉了 .tsx 或嵌套路径，bg-blue-500 这种写法就等于不存在。
- 错误写法：
content: ["./src/*.js"]→ 完全跳过所有 React 组件 - 正确写法：
content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"] - 用 MDX、Astro 或自定义组件？得手动加进去，比如
"./src/**/*.mdx"
@layer utilities 位置错位，自定义样式永远被压
Tailwind 默认把所有工具类注入到 @layer utilities，而你手写的普通 CSS 规则（比如 .btn { color: red; }）默认落在未声明层或 @layer base，天然比 utilities 低一级——所以 text-red-500 总赢你写的 color: red。
- 必须把覆盖逻辑放进显式声明的
@layer，且确保@tailwind utilities在它之后 - 例如想让
.title覆盖text-xl，就得写：@layer components { .title { @apply text-2xl font-bold; } } - 别在
@layer utilities外直接写@apply，会报Cannot use @apply with unknown utility
动态类名如 text-${color}-500 构建时被直接忽略
JSX 里的模板插值 text-${color}-500 在源码中根本不存在完整字符串，Tailwind 静态扫描器看不见，自然不生成对应规则——DOM 上能看到 class，但浏览器查不到 CSS 声明。
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
立即学习“前端免费学习笔记（深入）”；
- 别拼字符串，改用预定义映射：
const textClasses = { primary: 'text-blue-500', danger: 'text-red-500' } - 高频组合也可走
safelist：safelist: ['text-blue-500', /text-[a-z]+-500/]（注意正则必须用斜杠包裹，不能加引号） - 用
clsx合并类时，确保每个分支返回的是完整类名字符串，而非带插值的表达式
CSS Modules 里 @apply 不生效或类名哈希化后失配
如果你在 .module.css 里写 @apply p-4 却没效果，常见原因是 PostCSS 插件顺序错了：必须让 postcss-modules 先跑，生成带哈希的作用域类名（如 .Button_button__abc123），Tailwind 才能基于这个选择器生成规则。
- 错误配置：
plugins: { 'tailwindcss': {}, 'postcss-modules': {} }→ 对象写法在 Node ≥15 不可靠 - 正确写法（数组）：
plugins: [require('postcss-modules'), require('tailwindcss'), require('autoprefixer')] - 模块内想用 Tailwind 工具类，必须用
@apply，不能直接写class="p-4"；全局类和模块类互不影响
最常被忽略的一点：Tailwind 的 @layer base（preflight）会直接重置 button、input 等原生标签样式，这种重置不依赖类名，所以加前缀、调换 class 顺序、甚至套一层 div 都无效——得关 preflight 或用 important: '#app' 局部锁定影响范围。
