根本原因是postcss-modules必须在tailwindcss之前执行，以确保tailwind基于已作用域化的类名（如.button_button__abc123）生成匹配规则；若顺序颠倒，则生成的css无法匹配哈希类名。
PostCSS插件顺序错位导致类名不匹配
根本不是写法错误，而是postcss-modules和tailwindcss执行顺序反了。CSS Modules 会在编译时把.button转成类似.Button_button__abc123的作用域类名；Tailwind 必须基于这个带哈希的类名生成对应 CSS 规则。如果tailwindcss先跑，它只看到原始类名.button，生成的规则却要匹配.Button_button__abc123，自然不生效。
必须确保插件数组中postcss-modules排在tailwindcss之前：
plugins: [
require('postcss-modules')({ generateScopedName: '[name]_[local]__[hash:base64:5]' }),
require('tailwindcss'),
require('autoprefixer')
]
- 绝对不要用对象写法：
{ 'postcss-modules': {}, 'tailwindcss': {} }——Node.js ≥15 后属性遍历顺序不可靠 - 如果用了
postcss-nested，它得放在tailwindcss之后、autoprefixer之前，否则@apply无法解析嵌套语法 -
tailwindcss必须在autoprefixer之前，且要禁用其内置autoprefixer（v3.3+ 默认启用），否则 flex 等规则可能被删两次
@apply在.module.css里不生效的真正原因
报错或输出原样@apply p-4，90% 是因为postcss-nested没加载，或者它被放到了tailwindcss前面。Tailwind 需要它先处理@apply语法，才能展开成实际工具类规则。
另外，@apply本身不生成新类，只复用已扫描到的工具类。如果p-4没出现在content配置覆盖的文件里，它根本不会被生成。
- 必须在
.module.css顶部加@reference tailwindcss;（Tailwind v3.3+）才能让@apply识别全局工具类 - 不能直接写
class="tw-p-4"——模块内必须用@apply tw-p-4 - 动态类如
text-${color}-500在.module.css里无效，JIT 编译器不处理字符串拼接
content配置漏路径导致工具类压根没生成
Tailwind v3+ 只按content数组里写的 glob 路径硬扫源码文本，漏一个文件，里面写的bg-blue-500就进不了最终 CSS。这不是“样式丢失”，是“类名根本没生成”。
- 写了
"./src/**/*.{js,ts}"但组件是.tsx或.vue？必须显式加上："./src/**/*.{js,jsx,ts,tsx,vue}" - 静态 HTML 模板（如
public/index.html）也要加进content，否则里面的class="text-center"会被当死代码删 - 用了第三方库源码（如 DaisyUI），得手动列进
content："./node_modules/daisyui/dist/**/*.js" - 路径大小写、斜杠方向、
**层级必须和磁盘上完全一致；Windows 下统一用/更稳
HTML/CSS混用普通 class 和模块化 class 的隐性隔离
比如className="tw-p-4 ${styles.button}"，tw-p-4走全局 CSS，styles.button走模块作用域——两者完全独立，padding 和按钮样式互不影响。开发者常误以为能“叠加”，其实只是视觉巧合。
-
twMerge不跨作用域合并类，它只处理同一字符串里的带前缀工具类 - 模块内想用 Tailwind 工具类，必须用
@apply（如@apply tw-p-4 tw-bg-blue-500），不能依赖运行时拼接 - hover/focus 等变体需
postcss-preset-env支持，且必须放在tailwindcss之后
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
