如何让daisyUI的lifted标签栏下划线铺满容器宽度？

有三种简便实现方式，按需选择：

方法1：自定义CSS覆盖默认样式 #

直接修改.tabs的伪元素宽度，让下划线铺满容器：

.tabs.tab-lifted::after {
    width: 100% !important;
}

将这段代码添加到你的全局样式文件中，即可让下划线直接延伸到容器左右边缘。

方法2：利用Tailwind自定义变量实现 #

给外层tabs容器添加自定义变量，再配合全局样式调整：

<div class="tabs" style="--tabs-border-width: 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>

补充全局样式：

.tabs[style*="--tabs-border-width"]::after {
    width: 100%;
    border-bottom-width: var(--tabs-border-width);
}

这种方式可通过自定义变量灵活控制边框宽度。

方法3：纯Tailwind类实现（无需额外CSS） #

给tabs容器加底部边框，再用负边距让标签对齐边框：

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

通过负边距让标签覆盖容器底部边框，视觉效果和原生下划线一致。

内容的提问来源于stack exchange，提问作者newtovaux