conditional-statementstailwind-css

How to override styling when both conditions are true with Tailwind css

In my Astro component I am using class:list for my tailwind styling.

I have the following situation where both conditions are true, I want isRedColor to be leading. How can I fix that?

<span
  class:list={[
    'text-large bg-gray text-white font-bold',
    { 'bg-orange': theme === "orange" },
    { 'bg-red': isRedColor },
    classes,
  ]}
>
  {title}
</span>
Solution

  • Add an additional check to verify if isRedColor is false to bg-orange.

    <span
  class:list={[
    'text-large bg-gray text-white font-bold',
    { 'bg-orange': theme === "orange" && !isRedColor },
    { 'bg-red': isRedColor },
    classes,
  ]}
>
  {title}
</span>