bug: button borders are inconsistent between browsers in v5

[williamjallen]

Reproduction URL (Required)

https://play.tailwindcss.com/Of7o2YrTk4

What version of daisyUI are you using?

5.0.35

Which browsers are you seeing the problem on?

All browsers

Describe your issue

The new border on buttons in v5 looks excellent in Chrome, but doesn't appear in Safari. Interestingly, the borders show up properly when viewing the docs with Safari.

Chrome:

Safari:

[github-actions[bot]]

Thank you @williamjallen for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[sulimanbenhalim]

Chrome:

Safari:

It works fine for me, what version of Safari are you using ?

[williamjallen]

Safari: Version 18.3.1 (20620.2.4.11.6)

[saadeghi]

I can't see the issue on Safari.

Can you check the devtools to see if the border exists in box model?

[williamjallen]

@saadeghi Yep, I can see the border in the box model:

Interestingly, I noticed that this looked fine when I viewed it on a different Mac with a different version of Safari. I have no explanation regarding why that might be the case though. It also looks fine in Chrome on the Mac where I experience this issue.

Playing around with it some more, I can manually set the border color just fine:

I can also set the border width as expected (note the wider button):

In case it's helpful, here's the list of computed properties. Note that the border is the same color as the background:

It seems like it's just the default color that's messed up. Is this perhaps related to the default border color changes in Tailwind v4? https://tailwindcss.com/docs/upgrade-guide#default-border-color

[saadeghi]

computed color for border in light theme must be border-bottom-color: oklab(0.931 0 0);

Can you check the border-color of .btn in devtools?
It must be var(--btn-border) equal to color-mix(in oklab, oklch(98% 0 0), #000 calc(1 * 5%)) It looks correct for me on Safari 18.5, maybe they fixed the issue already….

[williamjallen]

@saadeghi It looks like the Tailwind Play link is currently broken due to an issue with the most recent release. I just opened https://github.com/saadeghi/daisyui/issues/3920 for that. I'll check the above once it's back to working.

[saadeghi]

@williamjallen Try @plugin "[email protected]"; until the Skypack issue is fixed:
https://play.tailwindcss.com/21yTAkzzOo?file=css

[williamjallen]

@saadeghi Hmm, it looks like I'm missing the color-mix part:

[pdanpdan]

Can this be still reproduced? Because it might have been related to some back-and-forth changes in tailwind about @supports

@williamjallen Can you please test again with the original play (unpinned versions) and report back if the problem still exists?

[williamjallen]

@pdanpdan This issue appears to have been fixed. Thanks for following up on this!