RadioTabs borderColor and bgColor props not working #475
Description
Hi Benji,
I've noticed in the Storybook that the RadioTabs borderColor and bgColor props are not working, in contrast to the color prop.
They're supposed to be orange and yellow respectively, but they're not.
I suspect it's due to this note by Tailwind, which can be seen is actually used in the RadioTabs component here.
It seems problematic to construct arbitrary tailwind classes, by using the borderColor and bgColor props as part of the Tailwind class name.
Now, when I try to set the className of the RadioTab with border-primary for example, it gets overwritten by classes .tabs-bordered > .tab and .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked). I think className provided to the element should receive precedence, if that's possible under CSS precedence rules. At minimum, maybe move className to be after the clsx part, and not before?
Two paths to resolve this I can think of are:
- Mentioning in the Storybook / README of the package that to use certain props, which create dynamic Tailwind classes, you have to safelist them, as explained here. Haven't tried this myself, not sure how since I haven't played around with tailwind that much.
- Make
borderColorandbgColorbehave the same ascolor, where you have to pick from a limitedComponentColorrange, instead of providing whatever color you like.
I will note that I haven't explored what other places in the package suffer from the same behavior, might be 0, might be more.
Let me know what you think.