How to have each tab name to have its own row on small screen?

Question

I'm using daisyUI's radio tab lifted + tab content. The code is the same with the demo, except the tab names are long:

<div role="tablist" className="tabs tabs-lifted">
  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 1 is very long" />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 1</div>

  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 2 is very very long" checked />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 2</div>

  <input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 3 is very very very long" />
  <div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6">Tab content 3</div>
</div>

(Tailwind Playground)

On small screen, the tab names are shrunk like this:

Is there a way to have each tab name to have its own row on small screen?

Answer 1

The tabs are organized using an implicit grid layout, whereby the tabs are displayed on the first row, with the content panels displayed on a second row.

We can the grid-row/grid-column classes along with max-* variant to reorganize the tabs to their own rows. The content panels should then occupy the next grid row with no tab in it.

I have had to use the !important modifier in the inline snippet due to using CDN and thus Tailwind's CSS comes before Daisy UI's CSS, but you may not need to use this modifier. I have used max-md: as the responsive breakpoint as an example.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.6.1/full.min.css" integrity="sha512-GPsEpdPx4PTEpE1Aqx5JVCm4PZVRRZhZWLKUzsqxxO+fViF9wptiDbY3/oZpeNir5goDpThsweit2UVcMovogQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div role="tablist" class="tabs tabs-lifted">
  <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1 is very long" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 max-md:!row-start-4">Tab content 1</div>

  <input type="radio" name="my_tabs_2" role="tab" class="tab max-md:!row-start-2 max-md:!col-start-1" aria-label="Tab 2 is very very long" checked />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 max-md:!row-start-4">Tab content 2</div>

  <input type="radio" name="my_tabs_2" role="tab" class="tab max-md:!row-start-3 max-md:!col-start-1" aria-label="Tab 3 is very very very long" />
  <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 max-md:!row-start-4">Tab content 3</div>
</div>