如何在SCSS文件中为Tailwind类添加!important？

你遇到的问题是Tailwind的@apply语法不支持md:!justify-end这种组合写法——!important修饰符不能直接跟在响应式前缀后面。下面是两种可行的解决方法：

方法一：用媒体查询单独包裹响应式的!important样式 #

直接把响应式条件下的样式拆出来，用原生CSS媒体查询（或Tailwind的@screen指令）包裹，在里面使用带!important的@apply：

.test-scss {
  @apply flex justify-center;
}

// 用Tailwind断点指令实现md响应式
@screen md {
  .test-scss {
    @apply !justify-end;
  }
}

如果偏好原生媒体查询，也可以写成：

.test-scss {
  @apply flex justify-center;
}

// 对应md断点的原生媒体查询
@media (min-width: 768px) {
  .test-scss {
    @apply !justify-end;
  }
}

方法二：自定义带!important的工具类 #

先在@layer utilities里定义一个自带!important的工具类，再在响应式场景下调用：

@layer utilities {
  .!justify-end {
    justify-content: end !important;
  }
}

.test-scss {
  @apply flex justify-center;
  @screen md {
    @apply !justify-end;
  }
}

核心原因 #

Tailwind的!important修饰符是针对单个类的标记，而响应式前缀（比如md:）是触发媒体查询的条件，两者在@apply语法里无法直接拼接成md:!class的形式，必须拆分处理。

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