How to create a Button with Tailwind CSS ?

Creating a button with Tailwind CSS is straightforward. Apply utility classes like bg-[color], text-[color], py-[padding], and px-[padding] to set the background colour, text colour, and padding for the button.

Syntax

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

Preview

Button Classes

Property	Description
bg-[color]	Sets the background colour of the button. Replace [color] with the desired colour name or value.
text-[color]	Specifies the text colour of the button. Use [color] for the desired text colour.
py-[padding]	Sets the vertical padding of the button. Replace [padding] with the desired vertical padding size.
px-[padding]	Sets the horizontal padding of the button. Replace [padding] with the desired horizontal padding size.
rounded-md	Applies a medium border-radius to create a rounded appearance for the button, enhancing its visual style.

Key Features

• Customization: Easily customize button appearance by adjusting background colour, text colour, and padding.
• Responsive Design: Utilize responsive variants (sm:, md:, lg:, xl:) for adaptive button styles on different screen sizes.
• Consistency: Tailwind’s utility-first approach ensures consistent button styling throughout the project.