Paddings
To make a button, we need to add some spaces (paddings) between text and border.
In Tailwind CSS, classes with prefix px-
are utilities to control
horizontal paddings.
px-2
would add0.5 rem (8 pixels)
padding to both left and right.px-4
would add1 rem (16 pixels)
padding to both left and right.
Similarly, classes with prefix py-
controls vertical paddings.
py-2
would add0.5 rem (8 pixels)
padding to both top and bottom.py-4
would add1 rem (16 pixels)
padding to both top and bottom.
Check these docs for more details: