postcss插件顺序必须为postcss-modules→tailwindcss→autoprefixer→cssnano，否则tailwind类在.module.css中失效；因postcss-modules需先加哈希前缀，tailwindcss才能生成匹配的选择器规则。
支持，但必须手动调整 PostCSS 插件顺序，否则 tailwindcss 生成的规则根本匹配不到 CSS Modules 加了哈希的作用域类名。
PostCSS 插件顺序错位导致 Tailwind 类在 .module.css 中完全失效
你在 .module.css 里写 btn 或 text-blue-500，浏览器里没效果？控制台没报错，但样式就是不生效——这不是你写错了，是构建链路“没对上”。
-
postcss-modules必须排在tailwindcss前面：它先给所有选择器加哈希前缀（如.Button_button__abc123），tailwindcss才能基于这个带前缀的选择器注入对应工具类规则 - 如果
tailwindcss在前，它看到的是原始类名.btn，生成的 CSS 规则却要匹配.Button_button__abc123，自然失配 - 常见错误配置是用对象写法
{ 'tailwindcss': {}, 'postcss-modules': {} }—— Node.js ≥15 后属性遍历顺序不可靠，等同于随机执行
@apply 在 CSS Modules 文件中报错或被忽略
@apply 不是语法糖，它依赖 postcss-nested 和 postcss-custom-properties 插件解析嵌套和变量，且它们的位置也有讲究。
- 必须加载
postcss-nested，且应放在postcss-modules之后、tailwindcss之前 -
postcss-custom-properties（用于@layer、@theme）同样需前置，否则@apply无法识别自定义类或主题变量 - 若用
@apply bg-blue-500 hover:bg-blue-600却只渲染出原始字符串，大概率是这两个插件缺失或顺序错位
:global() 是覆盖 TW-Elements 样式冲突的唯一合理方式
TW-Elements 的组件类（如 .tw-button）默认是全局作用域，而 CSS Modules 会把你的本地类名隔离。想复用它的基础样式又不想污染全局？只能用 :global()。
- 不要写
.tw-button { @apply px-4 py-2; }—— 这个选择器会被作用域化成类似.MyComponent_tw-button__xyz，根本找不到原始.tw-button - 正确写法是：
:global(.tw-button) { @apply px-4 py-2 rounded; }，确保样式真正打到 TW-Elements 的原始类上 - 注意：所有需要穿透作用域的第三方类（包括
swiper、flatpickr等）都得走:global()，没有例外
真正麻烦的不是写法，而是每次升级 tailwindcss 或引入新插件时，都要重新校验整个 PostCSS 链——顺序一松动，所有 .module.css 里的 Tailwind 类就集体静默。这没法靠文档记住，得靠 console.log 插件执行顺序来验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
