Utility specificity changes in v4

[nemanjam]

I had components utility in v3 defined like this, it allowed that links have default color of text-links, and in navigation links that color is overridden to text-headings. It worked fine because link-nav utility was defined second.

@layer components {
  /* text-links is default color */
  .link-default {
    @apply text-links no-underline;
  }

  // ...

  /* text-headings color wins, because link-nav class is defined after */
  .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;
  }
}

In v4 I had to define two utilities like this, now they are two separate utilities and definition order doesn't affect specificity so rules from link-nav don't win and links still have default color.

/* text-links wins but it shouldn't */
@utility link-default {
  @layer components {
    @apply text-links no-underline;
  }
}

// ...

@utility link-nav {
  @layer components {
    /* here, specificity fails, text-headings */
    @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;
  }
}

I don't want to use !important because I have other link variants too where I would then need to use !!important and would quickly create a mess. I have to define utilities because I use these classes with @apply.

How to control specificity in v4 utilities in a proper way?

[wongjn]

This isn't a direct solution to your question (I don't think there is anything that exists) but Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890404835888910467

In essence, consider using your templating system to convert link-default and link-nav to components and use their @applyed classes directly in the templates:

-<a … class="link-default">
+<a … class="text-links no-underline">

-<a … class="link-nav">
+<a … class="
+  text-headings whitespace-nowrap underline-offset-4 text-lg
+  hover:text-links-hover focus:text-links-hover focus:underline active:text-links-hover
+">

You could then use logic in your templates to override these classes for others when needed too.