Tailwind CSS中@apply指令定义的样式无法覆盖如何解决

你的问题本质是CSS选择器优先级和加载顺序导致的：用@apply定义的.card类编译后，其CSS规则可能出现在Tailwind工具类（如bg-black）之后，相同权重下后定义的样式会生效，所以bg-slate-300覆盖了bg-black。以下是几种解决方法：

• 调整CSS加载顺序：将自定义的.card类放在Tailwind样式导入之前，让Tailwind工具类的规则后加载，自然覆盖前面的样式。示例：

  /* 自定义类写在最前面 */
  .card {
    @apply bg-slate-300;
  }
  
  /* 再导入Tailwind核心样式 */
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• 使用Tailwind强制前缀：直接在要覆盖的工具类后加!，强制提升该样式的优先级：

  <div className="card bg-black!">
  

• 提升工具类选择器权重：自定义一个更高权重的组合类，确保它能覆盖.card的样式：

  .card.bg-black {
    @apply bg-black;
  }
  

  使用时依旧写：

  <div className="card bg-black">
  

• 直接使用组合类替代@apply：如果不需要封装.card类，直接在元素上写多个工具类，顺序靠后的会自动覆盖前面的：

  <div className="bg-slate-300 bg-black">
  

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