which class tailwind chooses in case of multiple of same property

[Adnan0061]

If for any reason some JSX element contains multiple values of the same property, how tailwind decides which class to take into consideration.

like if I use both "bg-red-500" and "bg-blue-500" which one it will take.

[crswll]

It's up to the order the CSS is generated. If it's:

.bg-red-500 {}
.bg-blue-500 {}

It'll end up blue because it's later in the source code.

I would never rely on this, though. It's the same as trying to say a variable is two different values at the same time.

[Adnan0061]

I figured that for alphabetic classes like colors they work as alphabetic ascending order and the highest one picked, like here among .bg-red-500 & .bg-blue-500 .bg-red-500 will be picked as r comes after b,

and for numbers bigger one will be chosen, so among p-3 & p-6 p-6 will be chosen. And among .bg-blue-500 & .bg-blue-700 .bg-blue-700 will be chosen.

but I think there should be a better solution though

[adamwathan]

The solution is don’t add two classes that target the same property, just add the one you actually want 👍🏻

[Adnan0061]

there is a problem with that, let's why I asked. Let's say I am using daisy UI they use component classes. they use @apply to create these classes. Now it is evident that we need to modify to change their classes, then there will be the problem,

you might say that you just use @apply to modify their classes, I know @apply will set the latest one in use but then I have to set that to a new minimum value that will be used like if a button has px-5 class, I need to use different padding to different places. so if I use px-4 or less it won't work, so I will have to set px-0 as default.
Then also more than one similar class will be used and also I will have to provide px to every button. I know daisy has some issues but the case is absolute. Or maybe I have some knowledge gap if so please enlighten me.

And I also wonder, can there be another directive like @remove which removes the classes?

The solution is don’t add two classes that target the same property, just add the one you actually want 👍🏻

[Adnan0061]

@adamwathan I am interested in the solution to this problem. If you have any please let me know.

[Alex-Nascimentoo]

Maybe I'm a bit late on this, but here is what worked for me:

After reading your hint about alphabetic order, I created variables with a "z" prefix on tailwind.config.js, so that they will always overcome the other variables.

Example:

  "bg-red-500": 'hexcodeRed',
  "bg-z-red-500": 'hexcodeRed',
  "bg-blue-500": 'hexcodeBlue',
  "bg-z-blue-500": 'hexcodeBlue'

Now, whenever I need to use two classes with same property, I use this z prefix solution

[Adnan0061]

I found this package tailwind-merge. I think you can give it a try.

[Adnan0061]

so, I think using tailwind-merge will be the best solution for this.

[posti85]

An use case is the following (it's Vue, but it's an example easy to understand):

Suppose you have a MyButton component defined with bg-red-500 by default:

<template>
  <button class="bg-red-500"> 
    <slot />
  </button>
</template>

You want to use that component but this time redefining the background color from outside:

<template>
  <MyButton class="bg-blue-500">Test</MyButton> 
</template>

The generated HTML is:

<button class="bg-red-500 bg-blue-500">Test</button>

But bg-red-500 rule is applied because in CSS it's defined after bg-blue-500 rule.

tailwind-merge package could be a good workaround for now... But I still think Tailwind identifying classes which applies to the same CSS rule and applying the last listed could be great.