Padding
Add inner space with the p, px, py and side-specific utilities.
Syntax
class="p-4 px-6 pt-2"Padding utilities add space inside an element, between its border and its content.
p-4— padding on all sides.px-4/py-2— horizontal / vertical.pt-4 pr-2 pb-4 pl-2— one side each.
The number is a step on the spacing scale: 4 equals 1rem (16px).
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer adds breathing room inside a card by applying p-6 to give all four sides equal padding.
- A button is given horizontal and vertical padding independently with px-5 py-2 to control its clickable area shape.
- A navigation item gets left padding only via pl-4 to indent it under a sidebar section header.
More examples
Uniform padding
p-8 applies 2rem of padding uniformly to all four sides of the element using Tailwind's spacing scale.
<div class="bg-sky-50 p-8">
<p class="text-sky-900">8 units of padding on all sides (2rem)</p>
</div>Axis-specific padding
px-6 sets left and right padding (1.5rem each) while py-2 sets top and bottom (0.5rem), shaping the button's proportions independently.
<button class="bg-indigo-600 text-white px-6 py-2 rounded">
Subscribe
</button>Side-specific padding
pl-4 adds left padding only, indenting list items away from the colored border indicator without adding space to other sides.
<ul class="border-l-4 border-indigo-500">
<li class="pl-4 py-2 text-gray-700">Item One</li>
<li class="pl-4 py-2 text-gray-700">Item Two</li>
</ul>
Discussion