This content originally appeared on DEV Community and was authored by Siddharth Chaudhary
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.
This content originally appeared on DEV Community and was authored by Siddharth Chaudhary
Siddharth Chaudhary | Sciencx (2021-10-15T18:22:02+00:00) How to make a good looking button group in Tailwind CSS. Retrieved from https://www.scien.cx/2021/10/15/how-to-make-a-good-looking-button-group-in-tailwind-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.