primefaces
PrimeFlex bg-* and text-* color utilities not working – colors seem undefined
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.
Same, I'm really streesed about it but i cannot solve it, unfortunately :/
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 [email protected]
