Tailwind CSS custom colors are not working - interaction with PrimeVue

[eboileau]

A clear and concise description of what the bug is.

Adding custom colors to pt property has unexpected/inconsistent behavior.

// tailwind.config.js
theme: {
    extend: {
        colors: {
            customcolor0: 'rgb(0 176 81 / <alpha-value>)', // #00b051ff
            customcolor1: 'rgb(2 176 237 / <alpha-value>)', // #02b0edff
        }
    }
}

<!-- use local pass through option -->
<Dropdown
    :pt="{
    item: ({ context }) => ({
        class: [
        {
            'text-gray-700 hover:text-gray-700 hover:bg-customcolor0':
            !context.focused && !context.selected,
        }
        ]
    })
    }"
>

When I implement the change, it works. But if I stop the app and restart it, then customcolor0 is not working anymore, and the default PrimeVue Tailwind theme is used. Same thing actually if I replace e.g. with hover:bg-[#00b051]. Then if I change something, e.g. hover:bg-[#00b052], it works, but reverting back to hover:bg-[#00b051] doesn't. In some cases, i.e for some colors, the color doesn't work at all...?! I don't understand, and I have no clue what is causing this.

Output or error messages.

No response

Additional context

I don't know if this is only due to Tailwind configuration, or some interaction with PrimeVue. I'm currently using unstyled mode, with the following Tailwind setup

1. Add @layer configuration in style file

@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
  @layer base {
    @font-face {
      font-family: 'ham';
      font-weight: 400;
      font-style: normal;
      font-display: auto;
      unicode-range: U+000-5FF;
      src:
        local('ham'),
        url('@/assets/fonts/ham.woff') format('woff');
    }
  }
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
/*   @tailwind variants; */
}

2. Make tailwind.config.js aware of PrimeVue

module.exports = {
  content: [
    'index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        customcolor0: 'rgb(0 176 81 / <alpha-value>)', // #00b051ff
        ...
      }
    }
  },
  plugins: []
}

3. For the rest, I use a mix of local pt and global configuration

import { usePassThrough } from "primevue/passthrough";
import Tailwind from "primevue/passthrough/tailwind";

const app = createApp(App);

const tailoredTailwind = usePassThrough(
    Tailwind, // object to customize
    {...}, // customizations
    { // behavior of merging
        mergeSections: true,
        mergeProps: true
    }
)

app.use(PrimeVue, {
  unstyled: true,
  pt: tailoredTailwind,
  ptOptions: { mergeProps: true, mergeSections: true } // Unless I repeat options here, this doesn't work???
})

In theory, a particular component can override a global configuration since the pt props of a component and the global setting is merged with component having higher precedence. In practice, I've experienced a different situation... but since I have been changing a lot of things, I cannot really reproduce everything, and I still need to go through each and every component.

One thing is sure, though, is that colors are not working as expected, or there is something wrong with my understanding of the setup?

Tailwind is installed as a PostCSS plugin.

What browser were you using?

Firefox

What version of Sci-ModoM were you using?

dev

[eboileau]

By the way, we could simplify the color definition as follows:

crmb: {
    DEFAULT: 'rgb(2 176 237 / <alpha-value>)', // #02b0edff
    1: 'rgb(114 191 132 / <alpha-value>)', // #72bf84ff
    ...
}

[eboileau]

We could use the important modifier in the config or prefix classes with !, but I don't think this is the right solution...

[eboileau]

Classes are sometimes applied in an order that I don't understand, e.g. checkbox with text-white ... text-crmg with higher priority for text-white, despite text-crmg coming after (being specified in pt global or local). There is also probably some interaction with the Section slots...?

[eboileau]

This is definitely the case that classes are added one on top of the other, and get mixed-up somehow, as some definitions systematically get overridden, though I cannot see it. So I use ! wherever this doesn't work.

Anyway, I tried to move the app logic/style into a global pt, and use local pt for local variations.

I do NOT use unstyled: true??? And I still don't understand why I have to re-declare ptOptions

For now, that's the best I can do, with my current understanding.