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>

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>

See the result:

Result