How to make a good looking button group in Tailwind CSS

Tailwind CSS is a utility based framework. Which is great in many ways. However, Tailwind CSS does not have a default set of components for you to get started with.

This is a series that will show you how to build various common UI components with Tailwind CSS

So, you people showed a lot of interest in my articles that I wrote last week. So today, I created a tutorial on how to make a good looking button group in Tailwind CSS

Let's start by making 3 buttons

<button type="button">Button</button>
<button type="button">Button</button>
<button type="button">Button</button>

Let's add some padding to our buttons

<button type="button" class="px-4 py-2">Button</button>
<button type="button" class="px-4 py-2">Button</button>
<button type="button" class="px-4 py-2">Button</button>

Let's add hover and focus styles to our buttons

<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>

Right now, all we have is three decently styles, sad buttons. Let's make them a button group

<div role="group" class="flex"> 
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>
</div>

Let's add a margin to our button group

<div role="group" class="flex m-2"> 
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 px-4 py-2">Button</button>
</div>

We should add borders to our button

<div role="group" class="flex m-2"> 
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border-t border-b px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border px-4 py-2">Button</button>
</div>

Let's change the text color of our button group

<div role="group" class="text-gray-600 flex m-2"> 
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border-t border-b px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border px-4 py-2">Button</button>
</div>

Oops 😬. Nearly forgot. Let's add rounded corners to our button group.

<div role="group" class="text-gray-600 flex m-2"> 
<button type="button" class="rounded-l-lg hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border px-4 py-2">Button</button>
<button type="button" class="hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border-t border-b px-4 py-2">Button</button>
<button type="button" class="rounded-r-lg hover:bg-gray-50 focus:ring-2 focus:ring-indigo-200 border px-4 py-2">Button</button>
</div>

Here's what our button group should look like 👇

Thanks for reading and I hope you liked the article! 😊
I'll be adding more articles to this series soon.

Comments

[sid]

Tell me what you think! Comment here if you have any ideas to make my component look better or if you have any feedback in general of my post.