postcss插件顺序错位导致tailwind类在css modules中失效，根本原因是postcss-modules必须在tailwindcss之前执行，以确保tailwind对已作用域化的选择器生成规则；若顺序颠倒，则生成的css无法匹配带哈希前缀的类名。
PostCSS插件顺序错位导致CSS Modules中Tailwind类失效
Tailwind类在 .module.css 文件里完全不生效，或 @apply 原样输出、hover: 变体被忽略——这不是语法错误，而是 PostCSS 插件链执行顺序把 CSS Modules 的作用域逻辑和 Tailwind 的生成逻辑“撞飞”了。
根本原因在于：CSS Modules 依赖 postcss-modules（或类似插件）在早期阶段对选择器加哈希前缀并隔离作用域；而 Tailwind 必须在该插件**之后**运行，才能对已处理过的、带作用域前缀的选择器注入工具类规则。如果 tailwindcss 插件排在 postcss-modules 前面，它看到的还是原始类名（如 .btn），生成的规则却要匹配 .Button_button__abc123，自然失效。
-
postcss-modules必须在tailwindcss之前（确保类名已被作用域化后，Tailwind 才能正确生成对应规则） -
tailwindcss必须在autoprefixer之前（避免新特性被误判不支持而删掉） -
autoprefixer必须在cssnano之前（前缀必须加完再压缩） - 若用了
postcss-preset-env，它应放在tailwindcss之后、autoprefixer之前，避免降级干扰 Tailwind 内部的@layer结构
你的 postcss.config.cjs 很可能缺这三件事
你没贴出完整 postcss.config.cjs，但根据常见配置陷阱，大概率存在以下问题：
- 没显式声明
postcss-modules，或把它放在了tailwindcss后面 - 用对象写法
{ 'tailwindcss': {}, 'autoprefixer': {} }，导致执行顺序由 JS 对象属性遍历决定（不可靠，尤其 Node.js ≥15 后属性顺序不保证） - 没禁用
tailwindcss的自动前缀能力，与外部autoprefixer冲突（Tailwind v3.3+ 默认启用autoprefixer，重复调用会导致 flex 等规则被删两次）
正确写法应为数组形式，并显式控制顺序：
module.exports = {
plugins: [
require('postcss-modules')({ /* 配置 */ }),
require('tailwindcss')({ config: './tailwind.config.js' }),
require('autoprefixer'),
require('cssnano')({ preset: ['default', { discardComments: { removeAll: true } }] })
]
}
如何让 @apply 在 CSS Modules 中正常工作
@apply 在 .module.css 里报错或无效，90% 是因为 postcss-nested 或 postcss-custom-properties 没加载，或加载位置不对。
-
postcss-nested必须在tailwindcss之前（否则嵌套语法如.container { & .item { @apply p-2; } }不会被展开） -
postcss-custom-properties如果用于解析var(--color)，也需在tailwindcss前，否则theme(colors.primary)引用会失败 - Tailwind 的
@layer规则（如@layer components）不能出现在.module.css中——它只应在全局 CSS（如index.css）里配合@tailwind components使用
content 路径不覆盖 .module.css 文件是静默丢失的根源
Tailwind 不扫描 .module.css 文件里的类名，只扫描 content 字段指定的源码路径（如 ./src/**/*.tsx）。这意味着你在 Button.module.css 里写了 class="text-blue-500"，但这个字符串没出现在任何 content 列表文件中，构建时就会被 PurgeCSS 干掉。
- 确保
tailwind.config.js的content包含所有实际写类名的地方：JSX/TSX 模板、Vue/Svelte 文件、甚至 Markdown（如果用 MDX） - 不要指望
content: ["./src/**/*.css"]能起作用——Tailwind 不解析 CSS 文件中的类名字符串，只解析模板语言里的className或class属性值 - 如果你真要在
.module.css里写工具类（不推荐），得用safelist显式保留：safelist: [/text-/, /bg-/, /p-/]
最易被忽略的一点：CSS Modules 的作用域化发生在 PostCSS 链后期，而 Tailwind 的 class 名提取发生在构建前期（扫描阶段）。二者不在同一时空维度——别试图让 Tailwind “理解”模块化的类名，它只认源码里明写的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
