8000 RadioTabs `borderColor` and `bgColor` props not working · Issue #475 · daisyui/react-daisyui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

RadioTabs borderColor and bgColor props not working #475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
itaiperi opened this issue Apr 23, 2025 · 1 comment
Open

RadioTabs borderColor and bgColor props not working #475

itaiperi opened this issue Apr 23, 2025 · 1 comment

Comments

@itaiperi
Copy link
Contributor

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.
@itaiperi
Copy link
Contributor Author

I did a little more digging. I added [--tab-border-color:primary] directly to the tab's className, but it still didn't change anything.

It seems the border color is controlled by .tabs-bordered > .tab and .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) when active, where border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))) (doesn't seem to use the --tab-border-color variable, and .tabs-bordered > .tab when inactive, where border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))) (uses a different opacity when not active)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@itaiperi
0