如何覆盖Tailwind CSS链式选择器中定义的@apply指令样式

你遇到的无法覆盖的核心原因是CSS选择器优先级差异：链式类选择器.class-one.class-two的优先级为0-2-0，而Tailwind默认的工具类均为单类选择器，优先级仅为0-1-0，即使工具类定义在层级更高的@layer utilities中，也无法覆盖优先级更高的链式选择器样式。

• 方案1：给需要覆盖的工具类添加重要性标记
  Tailwind 3.0+支持在类名前加!前缀，自动给对应样式添加!important，优先级高于普通自定义样式，直接修改HTML即可：

<li class="class-one class-two !text-red-50 !bg-red-800">Item 3</li>

无需修改原有CSS定义，是改造成本最低的方案。

• 方案2：用:where()伪类降低链式选择器优先级
  :where()伪类本身不贡献任何优先级，包裹链式选择器后，整体优先级会低于普通单类选择器，此时@layer utilities中的工具类会自动覆盖组件层样式，修改CSS部分即可：

@layer components {
  :where(.class-one.class-two) {
    @apply text-black bg-gray-100;
  }
}

无需修改HTML结构，适合需要保留链式选择器逻辑的场景。

• 方案3：拆分自定义组件为单类选择器
  避免用多类链式选择器定义组件样式，改用单个自定义类名定义，此时优先级和Tailwind工具类一致，工具类因为加载顺序靠后会自动覆盖：

@layer components {
  .custom-list-item {
    @apply text-black bg-gray-100;
  }
}

对应HTML修改为：

<li class="custom-list-item text-red-50 bg-red-800">Item 3</li>

符合Tailwind组件类的最佳实践，长期维护性更好。

• 方案4：开启Tailwind全局important配置（不推荐）
  在tailwind.config.js中设置important: true，所有工具类都会自动添加!important，会全局覆盖所有非important的自定义样式，仅适合特殊场景下的旧项目改造，会打乱全局优先级逻辑，不推荐新项目使用。

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