使用 tailwind 时分段按钮的边框有问题

Question

尝试创建分段按钮，但边框有问题。 我想到处都有 1px 的边框，包括按钮之间

第二个变体的结构（按钮动态呈现）

<div class="divide-x">
 <button class="border-y first:border-l last:border-r">
</div>

我尝试了多种边界方式

• 每个按钮上的第一个边框，但比我在按钮之间有 2px，并且顺风我只能指定第一个/最后一个按钮来删除按钮之间的边框（我不想安装额外的库）
• 父级上的第二个 divide-x + border-y + child(button) first:border-r and last:border-r 由于某种原因 last:border-r 不适用并创建这样的东西

有什么建议么？

Answer 1

像这样？

<div class="divide-x divide-black border border-black rounded-full">
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
</div>

或者像这样？

<div class="flex">
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
</div>