@custom-variant as an alternative

[kidonng]

First of all, thanks for making tailwind-merge!

I really appreciate that the docs listed alternatives which made me realize I don't need tailwind-merge most of the time.

I would like to propose an additional alternative making use of @custom-variant, similar to Tailwind's existing important modifier:

/*
 * This creates @layer utilities.components
 * Technically this can go arbitrarily deep by nesting more layers
 */
@custom-variant component (@layer components);

Demo: https://play.tailwindcss.com/WGwvfbpYmp

<div class="p-10 flex gap-10">
  <!-- This does not work as .size-10 is generated before .size-40 -->
  <div class="border           size-40 size-10"></div>
  <!-- This works since .components:size-40 is one @layer deeper -->
  <div class="border component:size-40 size-10"></div>
</div>

Do you think this is useful enough to be included in the docs?

[dcastil]

Hey @kidonng! 👋

Ah cool, so the component: variant works like a default style that can be overridden? That would indeed be useful to add to the alternatives. I'll add it when I have some time. Feel free to submit a PR which adds this by the way. 😊

[dcastil]

There are also some interesting similar approaches here:

• [Feature Proposal] CSS class override utility for component composition. tailwindlabs/tailwindcss#1446 (comment)
• [Feature Proposal] CSS class override utility for component composition. tailwindlabs/tailwindcss#1446 (comment)

[kidonng]

Thanks for the info! Plugins likely can do it better, I just think we all love simple and native approaches.

The @custom-variant approach does need some more exploring though, for example using @layer does not compose well with other variants. Using :where seems better, would test if it's the case when I got time.

Edit: Indeed, :where composes better!

@custom-variant component (:where(&));

Demo: https://play.tailwindcss.com/5Vr31Ouv7F

<div class="flex gap-10 p-10">
  <div class="size-20 border bg-black hover:bg-white"></div>
  <div class="size-20 border component:bg-black component:hover:bg-white"></div>
  <div class="size-20 border component:bg-black component:hover:bg-white bg-green-400"></div>
  <div class="size-20 border  component:bg-black component:hover:bg-white bg-green-400 hover:bg-red-400"></div>
</div>

[dcastil]

Yeah the plugins are from pre-v4 where it was not possible to do it in user space. Cool to see that the :where trick is even better. 😁

[dcastil]

Linking PR: #592