Replies: 3 comments 5 replies
-
It's up to the order the CSS is generated. If it's:
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. |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
so, I think using tailwind-merge will be the best solution for this. |
Beta Was this translation helpful? Give feedback.
-
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.
Beta Was this translation helpful? Give feedback.
All reactions