text-white cannot be overridden by any color

[akkidongre]

I am conditionally rendering CSS classes on buttons in my React project. Due to the logic, I have the following classes on a button element.
"flex items-center border border-red-500 bg-red-500 bg-white px-3 py-1.5 text-white text-red-500"
But, text-white doesn't get overridden by text-red-500 class.
I am attaching the image of the problem as seen in Tailwind Play.

[adamwathan]

Hey! You should only add one text color class, that's what the squiggly yellow lines are telling you.

The browser doesn't override CSS classes left to right like that, CSS precedence is based on the order of the classes in the CSS file, not in your HTML.

Both of these elements will have black text:

<style>
  .white { color: white }
  .black { color: black }
</style>

<span color="white black">Hello</span>
<span color="black white">Hello</span>

[akkidongre]

Oh yes! Thank you @adamwathan