Tailwind v4工具类特异性控制：如何实现正确样式覆盖？

Tailwind v4中@utility定义的类均为单类选择器，特异性相同，因此无法像v3的components层那样靠定义顺序实现覆盖。以下是几种无需!important的解决方案：

方案1：嵌套选择器提升特异性 #

给link-nav添加自身类名嵌套，生成的选择器为.link-nav.link-nav（双类选择器），特异性高于单个类的link-default，从而实现覆盖：

@utility link-default {
  @layer components {
    @apply text-links no-underline;
  }
}

@utility link-nav {
  @layer components {
    .link-nav {
      @apply text-headings whitespace-nowrap underline-offset-4 text-lg;
      @apply hover:text-links-hover;
      @apply focus:text-links-hover focus:underline;
      @apply active:text-links-hover;
    }
  }
}

方案2：利用Tailwind层级优先级 #

Tailwind的层级优先级为 base < components < utilities，将需要覆盖的link-nav放在更高优先级的utilities层，link-default保留在components层：

@utility link-default {
  @layer components {
    @apply text-links no-underline;
  }
}

@utility link-nav {
  @layer utilities {
    @apply text-headings whitespace-nowrap underline-offset-4 text-lg;
    @apply hover:text-links-hover;
    @apply focus:text-links-hover focus:underline;
    @apply active:text-links-hover;
  }
}

方案3：使用Tailwind强制优先级前缀 #

通过Tailwind内置的!前缀提升单个属性的特异性（编译后不会生成!important，而是通过伪类选择器提升优先级）：

@utility link-nav {
  @layer components {
    @apply !text-headings whitespace-nowrap underline-offset-4 text-lg;
    @apply hover:text-links-hover;
    @apply focus:text-links-hover focus:underline;
    @apply active:text-links-hover;
  }
}

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