Having problem with borders on segmented button using tailwind

November 25, 2022

Trying to create segmented button, but having problem with borders.
I want to have 1px border everywhere including between buttons

Structure for 2nd variant (buttons are rendered dynamically)

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

I have tried multiple ways of borders

1st borders on each button but than I have 2px between buttons, and with tailwind I can specify only first/last button to remove border between buttons (I dont want to install aditional libraries)
2nd divide-x on parent + border-y + on child(button) first:border-r and last:border-r for some reason last:border-r doesnt apply and creates something like this

any suggestions?

>Solution :

like this?

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

or like this?

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