Tailwind CSS 与 CSS Modules 冲突源于 PostCSS 插件顺序错误：postcss-modules 必须在 tailwindcss 之前，否则哈希类名无法匹配 Tailwind 规则；插件需用数组显式声明，对象写法在 Node.js ≥15 中不可靠；.module.css 中必须用 @apply 引入工具类，不可直接写 class="tw-p-4" 或动态拼接；全局与模块类名作用域隔离，不能混用叠加。
直接说结论：Tailwind CSS 和 CSS Modules 冲突，不是你写错了类名，而是 PostCSS 插件执行顺序错了——postcss-modules 必须在 tailwindcss 之前，否则生成的哈希类名（如 Button_button__abc123）根本匹配不到 Tailwind 的规则。
PostCSS 插件顺序必须用数组显式声明
Node.js ≥15 后，对象写法 { 'tailwindcss': {}, 'autoprefixer': {} } 的属性遍历顺序不可靠，配置可能“看起来生效”实则随机失效。
- ✅ 正确写法（
postcss.config.cjs）：module.exports = { plugins: [ require('postcss-modules'), require('tailwindcss'), require('autoprefixer') ] } - ❌ 错误写法：
plugins: { 'postcss-modules': {}, 'tailwindcss': {} } - ⚠️ 注意：
postcss-nested或postcss-preset-env要放在tailwindcss之后、autoprefixer之前，否则@apply和 hover/focus 变体无法解析
CSS Modules 中想用 Tailwind 工具类只能用 @apply
在 .module.css 文件里写 class="tw-p-4" 是无效的——模块化作用域会把 tw-p-4 当作普通类名，但 Tailwind 没为它生成对应样式（JIT 编译器只扫描 content 配置里出现的类名，而字符串中的 tw-p-4 不会被识别）。
- ✅ 正确做法：
.button { @apply tw-p-4 tw-bg-blue-500 tw-rounded; } - ❌ 动态拼接类名如
text-${color}-500在.module.css里完全不生效，JIT 不处理运行时字符串 - ⚠️
@apply不生成新类，只复用已启用的工具类；如果tw-p-4没被purge.content扫描到，它压根不会出现在最终 CSS 中
全局 CSS 和模块 CSS 别混着用 class 属性
像 className="tw-p-4 ${styles.button}" 这种写法，看似“叠加”，实则是两个独立作用域：前者走全局 Tailwind 规则，后者走模块哈希作用域。padding 和按钮背景互不影响，但开发者常误以为能组合出新效果。
立即学习“前端免费学习笔记（深入）”；
- ✅ 想复用全局工具类进模块组件，只有一种方式：
@apply引入 - ❌ 不要指望
twMerge合并跨作用域类名——它只处理同一字符串内带前缀的类（如"tw-p-4 tw-bg-red-500"） - ⚠️ 全局样式（
app/globals.css）和模块样式加载顺序由打包器决定，无法靠@import控制优先级
最易被忽略的一点：Tailwind v3.3+ 默认内置 autoprefixer，如果 postcss 配置里又加了一次 autoprefixer，flex 等规则可能被删两次——务必在 tailwind.config.js 里设 corePlugins: { prefixer: false } 关掉内置版本。
