DEV Community

sid
sid

Posted on • Originally published at easyui.dev

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
sidcraftscode profile image
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.