BUG: `tabs-lg` screws up layout

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library

https://daisyui.com

MIT License

34.24k stars 1.31k forks source link

BUG: `tabs-lg` screws up layout #2970

Closed Pithikos closed 7 months ago

Pithikos commented 7 months ago

What version of daisyUI are you using?

4.10.1

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://codepen.io/Nijoko/pen/BaExxeW

Describe your issue

I'm trying to alter the official tabs example, but for simple changes it just doesn't play nicely. (This is on Vue3 for reference if it matters)

The official example kind of works okayish as seen in the screenshot. Changing tabs to tabs-lg totally screws up the layout

github-actions[bot] commented 7 months ago

Thank you @Pithikos 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 commented 7 months ago

I thing you forgot to use the tabs class.

- <div role="tablist" class="tabs-lg tabs-bordered">
+ <div role="tablist" class="tabs tabs-lg tabs-bordered">

tabs-lg is a modifier for tabs. It's not a replacement.

Let me know if you have a question.