Tailwind SCSS如何定义复用内置值的主题变量避免硬编码

@apply是Tailwind在PostCSS编译阶段处理的特殊语法，不属于SCSS原生支持的变量值类型。SCSS编译流程先于Tailwind执行，因此直接将@apply赋值给SCSS变量会触发编译报错。

以下方案均无需硬编码具体色值，可直接复用Tailwind内置预设：

• 方案1：在Tailwind配置中扩展自定义主色（最推荐，符合Tailwind设计逻辑）
  直接在tailwind.config.js中把内置的blue.500映射为自定义主色，后续所有组件可直接调用语义化的主色类，无需额外定义SCSS变量，换主色时仅需修改配置处的映射值即可全局生效：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
      extend: {
        colors: {
          primary: theme('colors.blue.500')
        }
      }
    }
  }
  

  组件样式可简化为：

  .btn-{
    &primary{
        @apply bg-primary text-white;
        &:disabled{
            @apply bg-primary/50;
        }
    }
  }
  .alert-{
    &primary{
        @apply bg-primary text-white;
    }
  }
  

• 方案2：用Tailwind内置theme()函数定义SCSS变量
  如果需要在SCSS逻辑中使用主色变量做分支判断、计算，可通过theme()函数直接读取Tailwind配置的预设值，无需硬编码色值：

  // variables.scss
  $primary: theme('colors.blue.500');
  $text-on-primary: theme('colors.white');
  

  组件中可通过Tailwind任意值语法调用变量：

  .btn-{
    &primary{
        @apply bg-[$primary] text-[$text-on-primary];
        &:disabled{
            @apply bg-[$primary]/50;
        }
    }
  }
  .alert-{
    &primary{
        @apply bg-[$primary] text-[$text-on-primary];
    }
  }
  

• 方案3：抽离公共样式为SCSS Mixin
  如果需要复用整组样式规则而非单个色值，可将公共样式封装为Mixin，在各组件中直接引入调用：

  // mixins.scss
  @mixin primary-style {
    @apply bg-blue-500 text-white;
  }
  @mixin primary-disabled-style {
    @apply bg-blue-500/50;
  }
  

  组件调用方式：

  .btn-{
    &primary{
        @include primary-style;
        &:disabled{
            @include primary-disabled-style;
        }
    }
  }
  .alert-{
    &primary{
        @include primary-style;
    }
  }
  

注意：如果需要调整主色透明度，不要直接用SCSS原生颜色函数处理theme()取到的值，优先用Tailwind自带的透明度后缀（如/50），可自动适配Tailwind的透明度生成逻辑，避免色值编译异常。

内容的提问来源于stack exchange，提问作者Alaksandar Jesus Gene