How to conditionally override a color by another one ?

[kissu]

Hi ! 👋🏻
Not sure if that question was already asked but I really don't know how to phrase that one so here is my question. ^^

I'm using a Nuxt app w/ the module @nuxtjs/tailwindcss, working perfectly so far !

I do have this kind of setup

module.exports = {
  theme: {
    colors: {
      'bluegray-500': 'var(--color-bluegray-500)',
      'dark-500': 'var(--color-dark-500)',
      'primary-500': 'var(--color-primary-500)',
      ...
    }
  }
}

Pulling colors from an SCSS file

:root {
  --color-gray-500: hsl(200, 13%, 95%);
  --color-primary-500: hsl(168, 59%, 47%);
  --color-bluegray-500: hsl(200, 20%, 68%);
  ...
}

Then, I do have some conditionnal logic for specific colors in some of my components.
It's looking like this

// VueJS
<span
  :class="[
    value === selected ? 'text-primary-500' : 'text-dark-500',
    { 'text-bluegray-500 font-bold': disabledValues.includes(value) },
  ]"
>
  <slot></slot>
</span>

So, basically the text inside of the span should be:

• primary-500 if it's selected
• dark-500 if it is not selected
• bluegray-500 if it's disabled (whatever if it's selected or not)

I thought at first that it was defined somewhere else at first but it doesn't.
Tried to invert the 2 lines inside of my array in :class, nope.
Then, I tried with something like text-primary-500 (to replace text-bluegray-500) and it was overriding text-dark-500 since it's defined below the other 2 colors. Tried to change the order of the .scss file but soon realized that it was depending of tailwind.config.js's color ordering.

I was wondering if I was doing something wrong. I guess that this is how it's supposed to work ?
Also, is there a non ugly solution to help overriding this ?

PS: saw #1446, but it did not helped me much. 😓

[kissu]

Okay, one workaround is to export text-bluegray-500 into a scoped style like text-bluegray-color and make the condition like this

{ 'text-bluegray-color font-bold': disabledValues.includes(value) }

Not the best way but better than nothing. Maybe vue3 dynamic style variables could help too. 🤔

[adamwathan]

Problem is that when it's disabled and not selected, you are adding two colors:

<span class="text-dark-500 text-bluegray-500 ...">

So those are conflicting. You need to make sure only one color class is ever added at a time by reworking the conditional logic to always check all states.

[kissu]

Alright, I can indeed do that, just wanted to be sure. 👌🏻

There is no way of overriding the first one by the last one I guess? No "cascade" here since TailwindCSS is an utility framework? ☺️