CSS variable mismatch with PrimeVue 4.x

[garethjamesmoneyalive]

CSS color variable names have changed in PrimeVue 4.x so there's currently a mismatch.

The class text-red-500 currently uses:

.text-red-500 {
    color: var(--red-500) !important;
}

This is fine with PrimeVue 3.x but as of 4.x the CSS variable is prefixed and needs the value --p-red-500.

[DotoPototo]

It looks like primeflex is no longer going to be maintained which they mention here

They also mention a tool to help move from primeflex to tailwind CSS.

[cricketthomas]

This should be pinned. We just moved everything to primeflex 😞 and now its just not going to work with primevue v4.

[asokr]

This should be pinned. We just moved everything to primeflex 😞 and now its just not going to work with primevue v4.

Try to remove prefix in app init

app.use(PrimeVue, {
    theme: {
        preset: Lara,
        options: {
            prefix: "",
        },
    },
});

[abdell1999]

If you are using Nuxt, the solution proposed by asokr also works, you just add the prefix to the export of the theme
export default { preset: MyPreset, options: { darkModeSelector: ".p-dark", prefix: "", }, };

This is a temporary solution, it would be best to migrate to what will be supported. All the best.

[AmmarMohamadIsmaeel]

This is so frustrating!!! :(

[docentYT]

Same problem with PrimeNg.

border-round also uses wrong class.