DEV Community

Siddharth Chaudhary
Siddharth Chaudhary

Posted on • Originally published at easyui.dev

How to make a good looking button 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

Today, we're going to be learning how to make a (good looking) button with Tailwind CSS.

Let's start by making a button

<button type="button">Button</button>
Enter fullscreen mode Exit fullscreen mode

Let's add some padding and margins

<button type="button" class="m-2 px-8 py-2">Button</button>
Enter fullscreen mode Exit fullscreen mode

Next, we can add text and background colors

<button type="button" class="m-2 px-8 py-2 bg-indigo-500 text-white">Button</button>
Enter fullscreen mode Exit fullscreen mode

We should give our button rounded corners

<button type="button" class="m-2 px-8 py-2 bg-indigo-600 text-white rounded-lg ">Button</button>
Enter fullscreen mode Exit fullscreen mode

Let's give our button a small shadow

<button type="button" class="m-2 px-8 py-2 bg-indigo-600 text-white rounded-lg  shadow-sm">Button</button>
Enter fullscreen mode Exit fullscreen mode

It is important that we add :hover and :focus styles to our button

<button type="button" class="m-2 px-8 py-2 bg-indigo-600 text-white rounded-lg  shadow-sm hover:bg-indigo-500 focus:ring-2 focus:ring-indigo-200">Button</button>
Enter fullscreen mode Exit fullscreen mode

Here's what our button should look like now 👇

Making 10 css classes 1

I think that a button with 10 classes is a bit .. too much.

Thank you so much @afif . This comment gave me inspiration to add this section to my article. There are too many classes on this button. However, thanks to the @apply directive, we can make this one class. We can simply take all our classes and "apply" them to one class.

.btn {
@apply m-2 px-8 py-2 bg-indigo-600 text-white rounded-lg  shadow-sm hover:bg-indigo-500 focus:ring-2 focus:ring-indigo-200;
}
Enter fullscreen mode Exit fullscreen mode

Now, after rebuilding your css, you can replace all those classes with one class in your button.

<button type="button" class="btn">Button</button>
Enter fullscreen mode Exit fullscreen mode

Thanks for reading and I hope you liked the article! 😊

Discussion (3)

Collapse
afif profile image
Temani Afif

I think that a button with 10 classes is a bit .. too much.

Collapse
sidcraftscode profile image
Siddharth Chaudhary Author

Thank you for this comment, really helpful.
We can use the @apply directive in Tailwind CSS to bring this down to one class.

Collapse
sidcraftscode profile image
Siddharth Chaudhary Author

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.