postcss-modules必须排在tailwindcss前面，以确保css modules先将.button转为.button_button__abc123等作用域类名，tailwind才能基于该哈希选择器生成匹配规则；若顺序颠倒则完全失效，且必须用数组而非对象声明插件顺序。
postcss-modules 必须排在 tailwindcss 前面
根本不是你写错了类名，而是构建时 postcss-modules 没在 tailwindcss 之前运行。CSS Modules 的作用是把 .button 变成 .Button_button__abc123 这种带哈希的作用域类名；Tailwind 只有看到这个处理后的选择器，才能生成匹配它的规则（比如 .Button_button__abc123 { padding: 1rem; }）。如果顺序反了，Tailwind 看到的还是原始 .button，生成的 CSS 却要匹配带哈希的类名，自然完全不生效。
postcss.config.cjs 必须用数组写法
用对象写法 { 'tailwindcss': {}, 'postcss-modules': {} } 是常见陷阱——Node.js ≥15 后属性遍历顺序不可靠，插件执行顺序等于随机。必须改用数组显式声明：
module.exports = {
plugins: [
require('postcss-modules'),
require('tailwindcss'),
require('autoprefixer')
]
}
漏掉 postcss-modules 或位置错，所有 .module.css 里的 Tailwind 类都会静默失效。
@apply 不生效或原样输出
这通常不是语法问题，而是依赖插件缺失或顺序错位：
-
@apply需要postcss-nested解析嵌套结构，它得放在tailwindcss之后、autoprefixer之前 -
@apply p-4 hover:p-6中的hover:变体需要postcss-preset-env支持，同样不能放错位置 - 如果
p-4没出现在content配置里被扫描到，它压根不会生成，@apply就无规则可复用
动态类和 :global() 的误用
写 className="tw-p-4 ${styles.button}" 时，tw-p-4 走全局 CSS，styles.button 走模块作用域——两者互不影响，也**无法被 twMerge 合并**。模块内想用 Tailwind 工具类，只能靠 @apply；想覆盖第三方组件（如 TW-Elements、Element Plus）的样式，必须用 :global(.tw-button)，否则作用域会把它变成 .MyComponent_tw-button__xyz，根本找不到目标。
最容易被忽略的是：每次升级 tailwindcss 或引入新 PostCSS 插件，整个链路都得重新校验——顺序松动一环，所有 .module.css 里的 Tailwind 表现就全崩，而且不报错，只“不生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
