Tailwind CSS结合PostCSS与CSS Modules时@apply行为不符预期，是配置错误还是设计如此？

这不是配置错误，是Tailwind CSS @apply的原生设计逻辑——它的定位是样式规则内联合并，并非CSS Modules那种类名组合复用机制，从设计初衷上就不会生成多类名拼接的效果。

@apply的实际工作逻辑 #

• @apply的核心实现是把Tailwind内置工具类对应的CSS规则，直接复制写入当前定义的自定义类内部，全程不保留原工具类的独立类名引用，也不会构建类名之间的组合关系。
  对你给出的示例代码：

.root {
  @apply flex align-center;
}

最终编译输出的CSS为独立规则块，不存在类名组合逻辑：

.root {
  display: flex;
  align-items: center;
}

Tailwind从最初版本的核心实现到官方文档定义，@apply始终没有兼容CSS Modules composes的类名拼接行为，不存在“配置错了导致没触发组合逻辑”的可能。

与CSS Modules composes的核心差异 #

• CSS Modules的composes是类名层面的复用：编译后styles.root是「自定义类的哈希名 + 被引用工具类名」的拼接字符串，DOM上会同时挂载多个类名，对应工具类的CSS规则在全局独立生成，多组件复用相同工具类时只会产出一份规则。
• @apply是样式规则层面的合并：编译后styles.root是经过CSS Modules哈希的单个独立类名，所有被@apply引用的工具类规则会被内联到这个类的规则块中；如果相同的工具类被多个自定义类@apply引用，对应的样式规则会在每个自定义类块里重复生成，反而会增大最终CSS的体积。

匹配类名复用预期的替代写法 #

如果要实现类似composes: flex align-center from global;的类名组合、全局规则复用效果，不需要依赖@apply：

• 直接在组件的DOM类名属性上，将Tailwind全局工具类和CSS Modules生成的局部类名手动拼接即可
  示例写法：

  <div className={`${styles.root} flex align-center`}>
    页面内容
  </div>
  

这种写法下，Tailwind的工具类会作为全局独立规则存在，全局复用的相同工具类只会生成一份压缩后的规则，CSS Modules的局部类只承载自定义的独有样式，既能实现多类名组合的效果，也能达到最优的CSS体积压缩目标。

内容的提问来源于stack exchange，提问作者Kepro