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.
Top comments (1)
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.