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.
Recommended Articles