Tailwind CSS的Tree-shaking对.scss模块内的@apply规则是否生效？

是的，Tailwind依然会对通过@apply引用的工具类实现按需打包（也就是你说的Tree-shaking效果），最终只会生成项目实际用到的样式。

原理说明 #

Tailwind的按需生成机制核心是项目文件扫描：它会遍历你配置范围内的所有文件（包括CSS/SCSS、JSX/TSX等），识别所有被使用的工具类——不管这些工具类是直接写在HTML/JSX的class属性里，还是通过@apply在自定义CSS类中引用的。只要你的自定义类被项目实际调用，Tailwind就会解析该类中@apply依赖的工具类，把对应的样式合并到自定义类中，同时不会打包任何未被引用的工具类。

对应你的示例 #

你的React组件中使用了自定义类styles.flex_row，对应的SCSS文件里该类通过@apply引用了flex和flex-row工具类。Tailwind扫描后会识别到这些依赖，最终生成的打包样式会是：

.flex_row {
  display: flex;
  flex-direction: row;
}

不会单独输出.flex和.flex-row类，也不会包含其他未被使用的Tailwind工具类，完全符合最小化打包的预期。

注意事项 #

确保你的Tailwind配置正确开启了按需模式：

• Tailwind v3及以上版本默认开启按需生成，无需额外配置；
• Tailwind v2需要在tailwind.config.js中配置purge选项，指定需要扫描的文件路径，才能实现按需打包。

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