何时应在Tailwind及SCSS中使用@apply指令？

一、@apply的核心争议 #

• HTML维护性问题：大量原子类堆砌会让HTML标签变得冗长臃肿，尤其是重复出现的组件样式，每次编写都要堆砌一串类名，后期修改时需要逐个定位标签调整，维护成本直线上升。
• CSS体积膨胀问题：很多人认为@apply会导致体积变大，本质是滥用@apply——如果随意把零散原子类打包成自定义类，会干扰Tailwind JIT编译器的摇树优化，原本可被剔除的冗余样式被保留，最终CSS体积失控。

二、Tailwind + SCSS的合理结合思路 #

核心原则是：用SCSS特性封装可复用的组件逻辑，但保留Tailwind原子类作为基础样式单元，而非盲目将原子类打包成自定义类。

1. 用SCSS变量统一主题配置 #

将Tailwind主题变量映射到SCSS变量，方便在自定义样式中复用，避免硬编码：

$primary-color: theme('colors.blue.500');
$border-radius: theme('borderRadius.md');

.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded-md;
  // 用SCSS处理动态逻辑
  &:hover {
    background-color: lighten($primary-color, 10%);
  }
}

这里@apply仅用来打包组件的基础原子样式，动态交互逻辑（如hover颜色计算）交给SCSS处理，既保留Tailwind的设计系统一致性，又用SCSS增强灵活度。

2. 用SCSS混合宏（Mixin）封装通用样式逻辑 #

针对多组件复用的样式逻辑，用Mixin替代@apply打包原子类：

@mixin card-shadow {
  box-shadow: theme('shadow.md');
  transition: box-shadow 0.2s ease;
  &:hover {
    box-shadow: theme('shadow-lg');
  }
}

.card {
  @apply bg-white rounded-lg p-4;
  @include card-shadow;
}

.modal {
  @apply bg-white rounded-lg p-6;
  @include card-shadow;
}

这种模式下，Tailwind原子类负责基础布局与样式，SCSS Mixin负责通用动态逻辑，既减少HTML中的重复类名，又不会导致CSS体积膨胀——Tailwind JIT仍能精准处理@apply中的原子类，SCSS Mixin仅在编译时注入对应选择器，不会产生冗余代码。

3. 避免过度封装：只处理高频复用样式 #

不要为了减少HTML类名就盲目封装所有样式，仅当某个样式组合重复出现3次及以上时，才考虑用SCSS+@apply封装成组件类。对于仅出现1-2次的样式，直接用Tailwind原子类写在HTML里更高效，也不会影响维护性。

三、总结 #

@apply本身不是问题，问题出在滥用方式。合理结合Tailwind与SCSS的关键是：

• 以Tailwind原子类为基础样式单元，享受JIT编译的体积优化
• 用SCSS的变量、Mixin、嵌套特性封装可复用的动态逻辑与组件样式
• 拒绝无意义封装，仅针对高频复用的样式组合使用@apply

这种方式既能解决HTML冗长的问题，又能保证CSS体积可控，甚至比纯原子类写法更精简——SCSS封装减少了重复样式声明，同时Tailwind JIT依然能精准摇树。

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