How to Make a Good Looking Button Group in Tailwind CSS

To make a good-looking button group in Tailwind CSS, we need to pay attention to how to make the buttons look as a whole. The trick is to group the buttons using the border property.

Copy the following HTML to your project:

<div class="flex">
    <button class="px-4 py-2 border border-gray-200 rounded-l">Button 1</button>
    <button class="px-4 py-2 border border-gray-200 border-l-0 border-r-0">Button 2</button>
    <button class="px-4 py-2 border border-gray-200 rounded-r">Button 3</button>
</div>

• We group the buttons using a `flexbox. This makes it flexible for spacing and alignment.
• We make three similar buttons using some common properties px-4 py-2 border border-gray-200.
• We assign rounded-l to Button 1 to make the left border rounded.
• We cancel the left and right side borders of Button 2 by using border-l-0 border-r-0, this will make the three buttons more like a whole.
• We assign rounded-r to Button 3 to make the right border rounded.

Now we have created a good-looking unified button group as shown below: