In this article I will show you how to build and use a button component for quick user actions using Tailwind CSS.

Before that, I will introduce you about Tailwind CSS.

Basic usage

Tailwind CSS is the most popular open-source CSS framework with a utility-first methodology for the class names, meaning that instead of an OOCSSS approach like btn and btn-lg you will instead use utility classes for paddings, margins, colors, and more.

Getting started

First of all, you need to make sure that you have Tailwind CSS installed in your project.

Install Tailwind CSS

You can either follow the quickstart guide or follow the next steps to install Tailwind CSS:

Install tailwindcss via NPM:

npm install -D tailwindcss
npx tailwindcss init

Configure the template paths inside the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

</main>

Create a new src/input.css file and add the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;

Great! Now that you have Tailwind CSS installed we can proceed further.

Guide

First thing I want to give it a full width and I want the height to be the height of the screen and then I also want to align all this to be center so we'll say flex item center justify center

let's go ahead and just create our button and also I like to keep the text inside of a span as well and i'll just go ahead and give this a class of relative just so it's not just hanging there as some text the width to go from 0 to 100 so we'll say group hover w full and we also want to add little bit of animation so we'll say transition all i like to use the ease out and then we'll say duration of 250ms. so now let's go ahead and hover the button let's go ahead and give us a different background than amber maybe let's say 400

So you can see the magic behind the overflow hidden because as we set overflow hidden and we hover over the button we now have this nice animation effect

Code

<main class="flex min-h-screen w-full items-center justify-center bg-gray-100">
  <!-- component -->
  <button class="group relative h-12 w-48 overflow-hidden rounded-lg bg-white text-lg shadow">
    <div class="absolute inset-0 w-3 bg-amber-400 transition-all duration-[250ms] ease-out group-hover:w-full"></div>
    <span class="relative text-black group-hover:text-white">Hover me!</span>
  </button>
</main>

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Thank you for reading :), To learn more, check out my blogs on Flex Direction, Hackathons and Flex Wrap.
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.

Keep learning! Keep coding!! 💛