How to make a good looking button with Tailwind CSS
Table of contents
No headings in the article.
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: