Published on

3 Things You Must Know To Build A Buttons With Tailwind CSS

Tags
Buttons
Buttons

If you are a FrontEnd developer, you might have heard of Tailwind CSS. It's a utility-first CSS framework that helps you to create custom designs without writing any CSS code. In this article, we are going to discuss how to create a Buttons ui component with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides you with a set of pre-defined CSS classes that you can use to create custom designs. It's different from other CSS frameworks because it doesn't come with any pre-designed components. Instead, it provides you with a set of low-level utility classes that you can use to create your own custom designs.

The description of Buttons ui component

Buttons are one of the most common UI components that you will find on any website or application. A button is a clickable element that performs an action when clicked. It can be used to submit a form, navigate to a different page, or trigger some other functionality.

Why use Tailwind CSS to create a Buttons ui component?

Tailwind CSS provides you with a set of pre-defined utility classes that you can use to create a Buttons ui component. It's easy to use and requires less CSS code compared to other CSS frameworks.

The preview of Buttons ui component

To create a Buttons ui component, we can use the bg-blue-500, text-white, and py-2 utility classes. These classes will give us a blue background color, white text color, and a padding of 2 units.

Free download of the Buttons's source code

The source code of Buttons ui component

To create a Buttons ui component, we can use the following HTML and CSS code.

<div class="mr-6">
<button class="w-full sm:w-auto px-9 py-4   mb-4  text-base font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-sm block    border-b border-purple-300 bg-purple-200 hover:bg-purple-300 text-purple-700">Learn More</button>
<button class="w-full sm:w-auto px-8 py-3.5 mb-4  text-base font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-sm block    border-b border-red-300    bg-red-200 hover:bg-red-300 text-red-900">New</button>
<button class="w-full sm:w-auto px-7 py-3   mb-4  text-base font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-sm block    border-b border-yellow-300 bg-yellow-200 hover:bg-yellow-300 text-yellow-900">New</button>
<button class="w-full sm:w-auto px-6 py-3   mb-4  text-base font-semibold leading-6  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-sm block    border-b border-green-300  bg-green-200 hover:bg-green-300 text-green-900">New</button>
<button class="w-full sm:w-auto px-5 py-2   mb-4  text-sm   font-medium   focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-sm block    border-b border-indigo-300 bg-indigo-200 hover:bg-indigo-300 text-indigo-900">New</button>
</div>

<br>

<div class="mr-6">
<button class="w-full sm:w-auto px-9 py-4   mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-md block  border-b border-purple-300 bg-purple-200 hover:bg-purple-300 text-purple-700">Learn More</button>
<button class="w-full sm:w-auto px-8 py-3.5 mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-md block  border-b border-red-300    bg-red-200 hover:bg-red-300 text-red-900">New</button>
<button class="w-full sm:w-auto px-7 py-3   mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-md block  border-b border-yellow-300 bg-yellow-200 hover:bg-yellow-300 text-yellow-900">New</button>
<button class="w-full sm:w-auto px-6 py-3   mb-4  text-base   font-semibold leading-6 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-md block  border-b border-green-300  bg-green-200 hover:bg-green-300 text-green-900">New</button>
<button class="w-full sm:w-auto px-5 py-2   mb-4  text-sm     font-medium  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-md block  border-b border-indigo-300 bg-indigo-200 hover:bg-indigo-300 text-indigo-900">New</button>
</div>

<br>


<div class="mr-6">
<button class="w-full sm:w-auto px-9 py-4   mb-4  text-base   font-semibold           focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-xl block  border-b border-purple-300 bg-purple-200 hover:bg-purple-300 text-purple-700">Learn More</button>
<button class="w-full sm:w-auto px-8 py-3.5 mb-4  text-base   font-semibold           focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-xl block  border-b border-red-300    bg-red-200 hover:bg-red-300 text-red-900">New</button>
<button class="w-full sm:w-auto px-7 py-3   mb-4  text-base   font-semibold           focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-xl block  border-b border-yellow-300 bg-yellow-200 hover:bg-yellow-300 text-yellow-900">New</button>
<button class="w-full sm:w-auto px-6 py-3   mb-4  text-base   font-semibold leading-6 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200  rounded-xl block  border-b border-green-300  bg-green-200 hover:bg-green-300 text-green-900">New</button>
<button class="w-full sm:w-auto px-5 py-2   mb-4  text-sm     font-medium             focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-xl block  border-b border-indigo-300 bg-indigo-200 hover:bg-indigo-300 text-indigo-900">New</button>
</div>

<br>


<div class="mr-6">
<button class="w-full sm:w-auto px-9 py-4   mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  border-b border-purple-300 bg-purple-200 hover:bg-purple-300 text-purple-700">Learn More</button>
<button class="w-full sm:w-auto px-8 py-3.5 mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  border-b border-purple-300 bg-red-200 hover:bg-red-300 text-red-900">New</button>
<button class="w-full sm:w-auto px-7 py-3   mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  border-b border-purple-300 bg-yellow-200 hover:bg-yellow-300 text-yellow-900">New</button>
<button class="w-full sm:w-auto px-6 py-3   mb-4  text-base   font-semibold leading-6 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  border-b border-purple-300 bg-green-200 hover:bg-green-300 text-green-900">New</button>
<button class="w-full sm:w-auto px-5 py-2   mb-4  text-sm     font-medium   focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  border-b border-purple-300 bg-indigo-200 hover:bg-indigo-300 text-indigo-900">New</button>
</div>

<br>

<div>
<button class="w-full sm:w-auto px-9 py-4    mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  bg-transparent hover:bg-purple-700 border border-purple-700 text-purple-700 hover:text-purple-200 ">Learn More</button>
<button class="w-full sm:w-auto px-8 py-3.5  mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  bg-transparent hover:bg-red-700    border border-red-700    text-red-700    hover:text-red-200 ">New</button>
<button class="w-full sm:w-auto px-7 py-3    mb-4  text-base   font-semibold focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  bg-transparent hover:bg-yellow-700 border border-yellow-700 text-yellow-700 hover:text-yellow-200 ">New</button>
<button class="w-full sm:w-auto px-6 py-3    mb-4  text-base   font-semibold leading-6 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200  rounded-full block  bg-transparent hover:bg-green-700  border border-green-700  text-green-700  hover:text-green-200 ">New</button>
<button class="w-full sm:w-auto px-5 py-2    mb-4  text-sm     font-medium  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200 rounded-full block  bg-transparent hover:bg-indigo-700 border border-indigo-700   text-indigo-700   hover:text-indigo-200 ">New</button>
</div>

How to create a Buttons with Tailwind CSS?

To create a Buttons ui component with Tailwind CSS, follow the steps below:

Step 1: Install Tailwind CSS

First, you need to install Tailwind CSS in your project. You can install it using npm or yarn.

npm install tailwindcss

Step 2: Create a CSS file

Create a new CSS file and import Tailwind CSS.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Step 3: Create a Buttons component

Create a new HTML file and add the following code to create a Buttons component.

<button class="bg-blue-500 text-white py-2 px-4 rounded">
  Click me
</button>

Step 4: Customize the Buttons component

You can customize the Buttons component by adding more utility classes. For example, you can add the hover:bg-blue-700 class to change the background color of the button on hover.

<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
  Click me
</button>

Step 5: Compile the CSS file

Finally, you need to compile the CSS file using the Tailwind CLI.

npx tailwindcss-cli build styles.css -o output.css

Conclusion

In this article, we discussed how to create a Buttons ui component with Tailwind CSS. We learned that Tailwind CSS provides you with a set of pre-defined utility classes that you can use to create custom designs. We also learned how to customize the Buttons component by adding more utility classes. With Tailwind CSS, you can create custom designs without writing any CSS code.