Priorities

When I use both p-7 and p-3 in any order the p-7 wins.

In both <div class="p-3 p-7"></div> and <div class="p-7 p-3"></div>, The p-7 applies.

I know that I should use on of them but sometimes I need to apply the same property and override the previous one.

https://play.tailwindcss.com/CHqNNuMYXm

[miguelcobain]

I do face this problem a lot when building some components. Let’s say you have a button component and by default you always apply a blue background. So you add the class bg-blue.

Many frameworks provide the ability to customize classes applied to the element from the outside.

It is very tempting to write something like this if you want a red button

<MyButtonComponent class="bg-red">
  A button
</MyButtonComponent>

however, the resulting HTML from this component call is

<button class="bg-blue bg-red">
  A button
</button>

if bg-blue comes last in the css file, then it “wins” and the button will not be red.

To solve this I thought about creating a “default” variant, that always comes before any normal utilities. That way the resulting html would be:

<button class="default:bg-blue bg-red">
  A button
</button>

Which should work because any default:* should come before the regular variant (or absence of variant).

Is this possible to do? Do you foresee any problems with this?

Of course, this would have to be used sparingly, only on things that we want to provide a default for and PurgeCSS should help the file sizes to stay low.

[saeedvaziry]

@fedeci Thanks for the advice 😅