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
borderColor and bgColor behave the same as color, where you have to pick from a limited ComponentColor range, 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.
Hi Benji,
I've noticed in the Storybook that the RadioTabs
borderColorandbgColorprops are not working, in contrast to thecolorprop.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
RadioTabscomponent here.It seems problematic to construct arbitrary tailwind classes, by using the
borderColorandbgColorprops as part of the Tailwind class name.Now, when I try to set the className of the
RadioTabwithborder-primaryfor example, it gets overwritten by classes.tabs-bordered > .taband.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked). I thinkclassNameprovided to the element should receive precedence, if that's possible under CSS precedence rules. At minimum, maybe moveclassNameto be after theclsxpart, and not before?Two paths to resolve this I can think of are:
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.