How to make a good looking button group in Tailwind CSS
Tags: tutorial, tailwindcss, css
Published: 2021-10-15 18:22:02

---
series: Making components with 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 👇 
{% codepen https://codepen.io/chaudhs769/pen/wvqKyjN default-tab=result %}

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