Search code examples
csstabstailwind-cssdaisyui

Is there a way to get lifted tabs in daisyUI to use the full width?

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>
Solution

  • 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/[email protected]/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/[email protected]/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/[email protected]/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.