如何在Tailwind CSS的@apply指令中使用Sass插值？

这不是VSCode的错误，是VSCode内置的SCSS语法检查器遵循标准SCSS规则，无法识别Tailwind扩展的@apply指令结合Sass插值的语法，因此产生了误报——而PostCSS编译时能正确解析Tailwind的语法，所以编译过程无报错。

修复方法 #

方法1：禁用VSCode对未知At规则的检查

打开VSCode设置（快捷键Ctrl+,），搜索scss.lint.unknownAtRules，将其值设置为ignore。这样VSCode就不会对@apply这类非标准SCSS指令的相关语法报错。

方法2：调整Sass写法，提前拼接类名

把要@apply的类名提前用Sass变量拼接完成，再传入@apply指令，可避开语法检查的误判：

$colorTypes: "primary", "success", "warning", "danger";

@each $colorType in $colorTypes {
  $bg-class: "bg-#{$colorType}";
  .card-#{$colorType} {
    @apply #{$bg-class};
  }
}

替代方案 #

如果不想依赖Sass循环，也可以在Tailwind配置的theme.extend中批量扩展工具类，但对于这类基于现有颜色变量的批量类生成，上述Sass写法会更直接高效。

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