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