2

I am using the tabs in daisyUI to display a set of lifted tabs.

However the tabs 'underlining' stops after the last tab, and I'd like it to continue all the way along to the edge of the div.

enter image description here

Is there a simple way to achieve this?

<div class="tabs">
    <a class="tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
</div>
newtovaux
  • 151
  • 1
  • 7

2 Answers2

4

Three approaches I could think of:

  1. Use a final child that grows out the width of the parent that has the bottom border.

    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

<div class="tabs">
  <a class="tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
  <a class="tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
  <a class="tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
  <a class="tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
  <a class="tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
  <span class="grow border-b border-base-300"></span>
</div>

  2. Draw the border on the parent element, using a 1px-high linear gradient.

    // Needed to have the `base-300` color be available in this demonstration since we are using
// Daisy UI via CDN. In "real" usage with the Daisy UI Tailwind plugin, all the colors would
// automatically be available for use.
tailwind.config = {
  theme: {
    extend: {
      colors: {
        'base-300': 'hsl(var(--b3) / <alpha-value>)',
      },
    },
  },
};
    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="tabs bg-[linear-gradient(theme(colors.base-300),theme(colors.base-300))] bg-bottom bg-no-repeat bg-[length:100%_1px]">
  <a class="tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
  <a class="tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
  <a class="tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
  <a class="tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
  <a class="tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
</div>

  3. Add a bottom border to the parent, and pull the child tabs over the border so it lines up with them

    // Needed to have the `base-300` color be available in this demonstration since we are using
// Daisy UI via CDN. In "real" usage with the Daisy UI Tailwind plugin, all the colors would
// automatically be available for use.
tailwind.config = {
  theme: {
    extend: {
      colors: {
        'base-300': 'hsl(var(--b3) / <alpha-value>)',
      },
    },
  },
};
    <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="tabs border-b border-base-300">
  <a class="-mb-px tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
  <a class="-mb-px tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
  <a class="-mb-px tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
  <a class="-mb-px tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
  <a class="-mb-px tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
</div>

See all these solutions in this Tailwind Play.

Wongjn
  • 8,544
  • 2
  • 8
  • 24
  • Many thanks, using a final child that grows out the width of the parent that has the bottom border worked perfectly. – newtovaux May 15 '23 at 19:57
2
<div class="tabs flex">
   <a class="tab tab-lg flex-auto">Tab1</a>
   <a class="tab tab-lg flex-auto">Tab2</a>
   <a class="tab tab-lg flex-auto">Tab3</a>
</div>

By using the Tailwind classes 'flex', you are telling the tab set div to display as a flexbox. By setting 'flex-auto' on each tab, you are causing each tab to take up as much space as it can, thus, it stretches to fit the maximum width! :)

Aeron Wolf
  • 21
  • 3