Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 15, 2021 06:22 pm GMT

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.


Original Link: https://dev.to/sidcraftscode/how-to-make-a-good-looking-button-group-in-tailwind-css-1fjh

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To