How to make a good looking button with Tailwind CSS

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

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>

Let's add some padding and margins

<button type="button" class="m-2 px-8 py-2">Button</button>

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>

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>

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>

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>

Here's what our button should look like now 👇

Making 10 css classes 1

Temani Afif • Oct 9

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;
}

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

<button type="button" class="btn">Button</button>

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

This content originally appeared on DEV Community and was authored by Siddharth Chaudhary

Print Share Comment Cite Upload Translate Updates

APA

Siddharth Chaudhary | Sciencx (2021-10-09T13:36:14+00:00) How to make a good looking button with Tailwind CSS. Retrieved from https://www.scien.cx/2021/10/09/how-to-make-a-good-looking-button-with-tailwind-css/

MLA

" » How to make a good looking button with Tailwind CSS." Siddharth Chaudhary | Sciencx - Saturday October 9, 2021, https://www.scien.cx/2021/10/09/how-to-make-a-good-looking-button-with-tailwind-css/

HARVARD

Siddharth Chaudhary | Sciencx Saturday October 9, 2021 » How to make a good looking button with Tailwind CSS., viewed ,<https://www.scien.cx/2021/10/09/how-to-make-a-good-looking-button-with-tailwind-css/>

VANCOUVER

Siddharth Chaudhary | Sciencx - » How to make a good looking button with Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/09/how-to-make-a-good-looking-button-with-tailwind-css/

CHICAGO

" » How to make a good looking button with Tailwind CSS." Siddharth Chaudhary | Sciencx - Accessed . https://www.scien.cx/2021/10/09/how-to-make-a-good-looking-button-with-tailwind-css/

IEEE

" » How to make a good looking button with Tailwind CSS." Siddharth Chaudhary | Sciencx [Online]. Available: https://www.scien.cx/2021/10/09/how-to-make-a-good-looking-button-with-tailwind-css/. [Accessed: ]

rf:citation

» How to make a good looking button with Tailwind CSS | Siddharth Chaudhary | Sciencx | https://www.scien.cx/2021/10/09/how-to-make-a-good-looking-button-with-tailwind-css/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Making 10 css classes 1

Related Posts