bug: Tabs-lift: Inconsistent Border Styling in DaisyUI 5

[ptifloflo]

Reproduction URL (Required)

https://play.tailwindcss.com/8RWklqnUAa

What version of daisyUI are you using?

5.0

Which browsers are you seeing the problem on?

Chrome

Describe your issue

Bug: Inconsistent Border Behavior in Lift Tabs (DaisyUI 5)

Description

In DaisyUI 5, the lift tabs (tabs-lift) exhibit inconsistent border styling when tabs are activated, breaking the visual symmetry and expected behavior of the tab component.

Reproduction

Minimal reproducible example: https://play.tailwindcss.com/8RWklqnUAa

Steps to Reproduce

1. Create a set of tabs using tabs-lift class
2. Change the active tab
3. Observe the unexpected border behavior

Expected Behavior

• All tabs should maintain a consistent border style
• Activating a tab should not cause other tabs to lose their border styling
• The border should behave symmetrically regardless of tab position

Actual Behavior

• When activating different tabs, some tabs lose their bottom border
• The border styling is inconsistent and appears to depend on the tab's position
• Borders disappear or change unpredictably when switching between tabs

Environment

• DaisyUI Version: 5.x
• Tailwind CSS Version: 4.x
• Browsers Tested: Chrome, Firefox, Safari

Possible Impact

This visual inconsistency:

• Reduces UI/UX quality
• Creates confusion in tab navigation
• Breaks the expected design pattern of lift tabs

Additional Notes

• The bug appears specific to the lift tab style
• Reproduces consistently across different environments

[github-actions]

Thank you @ptifloflo 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.

[saadeghi]

Hey, thanks for the details 💯

If you're using tabs (no tab-content), this is expected style:
https://play.tailwindcss.com/99c5Xc8dTb

If you're using tabs with tab-content, this is expected style:
https://play.tailwindcss.com/G9XKTwZnc2

Using tab-content, the bottom-border of the first tab becomes invisible because we want the perfect radius like this:

Not like this:

Let me know if you have a question.