How to style a button using Tailwind CSS
Published: 2022-12-14 17:43:52


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7up9skyc0pbarhkptu8z.gif)

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**
```html
<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 ](https://github.com/codewithshubhi/Tailwind-CSS-Components/blob/main/Button.html)link.

**Overall Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7up9skyc0pbarhkptu8z.gif)

**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Flex Direction](https://dev.to/shubhicodes/tailwind-css-tutorial-13-flex-direction-i8j), [Hackathons](https://dev.to/shubhicodes/all-about-hackathons-how-to-find-participate-win-42kk) and [Flex Wrap](https://dev.to/shubhicodes/tailwind-css-tutorial-14-flex-wrap-kee).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛