bug: Issue styling tabs with radio tabs

[itaiperi]

What version of daisyUI are you using?

v4.4.24

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/fpT7ztW4FM

Describe your issue

Hi,
I'm having an issue trying to style my tabs.
I want to have bordered radio tabs (with content), but with a gap between them.
Since the tabs class is actually a grid, I thought I'd add a gap-4 to space between the tabs.
What ended up happening, is that my content became about 160k pixels wide.
From my investigation, it has to do with this line.
It seems that spanning the tab-content class across span 9999 doesn't matter if there are no gaps, but if there are gaps - this causes the existence of 9999 gaps, which causes the very wide content container.

For now I solved it by putting mr-4 on each of the tabs but the last one, but I think this is an inherent problem that might cause other issues as well, and might be appropriate to address.

Here's a minimal reproducible example:

<div role="tablist" class="tabs tabs-bordered gap-4">
  <input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Tab 1" />
  <div role="tabpanel" class="tab-content p-10 border-red-500">Tab content 1</div>

  <input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Tab 2" checked />
  <div role="tabpanel" class="tab-content p-10 border-yellow-500">Tab content 2</div>

  <input type="radio" name="my_tabs_1" role="tab" class="tab" aria-label="Tab 3" />
  <div role="tabpanel" class="tab-content p-10 border-green-500">Tab content 3</div>
</div>

[github-actions]

Thank you @itaiperi 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]

All direct children of tabs are placed using grid, including the tab and the tab-content and adding gap to all of them breaks the layout. Instead you can add a class name like [&>input]:me-4 to add a margin, only for the tab:
https://play.tailwindcss.com/mPNWpjaQHX

Let me know if you have a question.