themesberg
Some Tailwind 4 color variables are undefined when used with ReactFlowbite
Current behavior
Tailwind 4 exposes color variables like --color-gray-300, --color-sky-300, etc. ReactFlowbite overwrites some of the colors and for them the color variables definitions are lost. The colors that are not overwritten by ReactFlowbite are defined.
On this screenshot "gray" is one of the colors redefined by ReactFlowbite and is undefined:
On this screenshot "sky" is one of the colors not redefined by ReactFlowbite and is defined:
Expected behavior
All color variables are defined.
Similar issue existed before for flowbite package. (https://github.com/themesberg/flowbite/issues/1021)
When this is fixed will it add colors to FlowbiteColors type? I am unable to use colors like 'emerald' for a <Badge> component for example.
What has happened to this fix? It sounded like it was close in June, but now it is December and the problem still exists. It seems impossible to use Flowbite React with Flowbite V4 and get these colors to work. They don't generate at all for me.
@rickross It's fixed now, but keep in mind that flowbite@v4 came with a full redesign + CSS variables only, that also handle the light/dark mode, while flowbite-react is not updated to work like that, u might encounter some inconsistencies.
There might be conflicts between flowbite@v4 base colors overrides vs flowbite-react ones. I guess it all depends which one is imported last in the Tailwind CSS config file.
In another light, when using flowbite-react u should not need to use/install vanilla flowbite, but since we're not 100% ported with all the components (and now the new v4 redesign), I guess u can use them both to fill in the gaps.