postcss插件顺序错位导致tailwind类在css modules中失效，根本原因是postcss-modules必须置于tailwindcss之前以先生成作用域化类名，否则tailwind无法匹配哈希选择器；同时需用数组而非对象声明插件顺序，并确保postcss-nested等依赖插件位置正确。
PostCSS插件顺序错位导致Tailwind类在CSS Modules中失效
根本不是语法写错，而是postcss-modules和tailwindcss执行顺序反了。CSS Modules必须先给类名加哈希作用域（比如.Button_button__abc123），Tailwind才能基于这个作用域化的选择器生成对应规则；如果Tailwind先跑，它只看到原始类名.btn，生成的CSS却要匹配带哈希的.Button_button__abc123，自然不生效。
-
postcss-modules必须放在tailwindcss之前 -
tailwindcss必须放在autoprefixer之前 - 禁用
tailwindcss内置autoprefixer（v3.3+默认启用），否则和外部autoprefixer重复调用，flex等规则可能被删两次
postcss.config.cjs里必须用数组写法显式控制顺序
对象写法{ 'tailwindcss': {}, 'autoprefixer': {} }依赖JS属性遍历顺序，在Node.js ≥15后不可靠——你改配置可能没效果，只是顺序随机变了。
- 正确写法是数组：
plugins: [ require('postcss-modules'), require('tailwindcss'), require('autoprefixer') ] - 确保
postcss-modules配置里generateScopedName没意外覆盖类名（比如误删了$local） - 若用了
postcss-nested或postcss-custom-properties，它们得放在tailwindcss之后、autoprefixer之前
@apply在.module.css里不生效的真正原因
报错或输出原样@apply p-4，90%是因为postcss-nested没加载，或者它被放到了tailwindcss前面——Tailwind需要它先解析嵌套语法，才能把@apply转成实际规则。
-
@apply本身不生成新类，只复用已有的工具类；如果p-4没在content里被扫描到，它根本不会被生成 - 动态类如
text-${color}-500在.module.css里无效，JIT编译器不处理字符串拼接 - hover/focus等变体需
postcss-preset-env支持，且必须放在tailwindcss之后
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），不能直接写class="tw-p-4" - 全局CSS和模块CSS的加载顺序由打包工具决定，别靠
@import硬调；Vite中CSS Modules默认插入在全局CSS之后
.module.css里都静默失效，DevTools里连生成的CSS规则都看不到——不是漏写，是压根没生成。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
