PrimeFlex bg-* and text-* color utilities not working – colors seem undefined

[bayramlibahram]

Hi team 👋

I'm using PrimeFlex v4 in a React project, and I'm running into an issue where the bg-* and text-* utility classes (e.g., bg-primary, text-secondary) are not applying any color styles. It seems like the color values are undefined or not injected properly.

🔁 Steps to Reproduce
Install PrimeFlex v4 in a React project.

Use classes like bg-primary, text-secondary, etc., on any HTML or JSX element.

Run the app and inspect the styles applied.

Colors do not appear — utilities are present but ineffective.

✅ Expected Behavior
Utility classes like bg-primary and text-secondary should apply theme-specific colors, similar to how they are demonstrated in PrimeFlex docs or PrimeReact themes.

❌ Actual Behavior
No colors are applied.

Looks like the color variables or CSS custom properties are not defined.

Utilities are present in the DOM but not effective.

[hugomes]

Same error for me. Did you solve that?

[kottybarn3567]

Same, I'm really streesed about it but i cannot solve it, unfortunately :/

[elgsylvain85]

It refers to variables starting with "--p-red-900" when they are defined directly starting with "--red-9--", which creates a "not defined" :

--red-900: #661814;

.bg-red-900 {
    background-color: var(--p-red-900) !important;
}

The temporary solution would be to revert to the npm version i primeflex@3.3.1

[bloodykheeng]

@elgsylvain85 whats the permanent fix

[Hosar]

Same error here, please provide a solution.