| Class | Properties |
|---|---|
.p-0 | padding: 0; |
.p-1 | padding: .25rem; |
.p-2 | padding: .5rem; |
.p-3 | padding: .75rem; |
.p-4 | padding: 1rem; |
.p-5 | padding: 1.5rem; |
.p-6 | padding: 2rem; |
.p-7 | padding: 3rem; |
.p-8 | padding: 4rem; |
.p-9 | padding: 6rem; |
Usage
All sides
Use .p-{size} to apply padding on all sides of an element.
<div class="p-4 inline-block bg-gray-200">
<div class="bg-gray-400"></div>
</div>
<div class="p-6 inline-block bg-gray-200">
<div class="bg-gray-400"></div>
</div>
<div class="p-8 inline-block bg-gray-200">
<div class="bg-gray-400"></div>
</div>Specific sides
Use .p{t|r|b|l}-{size} to apply padding on a single side of an element.
<div class="pl-4 inline-block bg-gray-200">
<div class="bg-gray-400"></div>
</div>
<div class="pr-4 inline-block bg-gray-200">
<div class="bg-gray-400"></div>
</div>
<div class="pb-4 inline-block bg-gray-200">
<div class="bg-gray-400"></div>
</div>Use .px-{size} to apply padding on the left and right (horizontal) sides of an element.
Use .py-{size} to apply padding on the top and bottom (vertical) sides of an element.
<div class="px-4 inline-block bg-gray-200">
<div class="bg-gray-400"></div>
</div>
<div class="py-4 inline-block bg-gray-200">
<div class="bg-gray-400"></div>
</div>Variants
By default, only responsive variants are generated for padding utilities.
Responsive
To control the padding for an element at a specific breakpoint, add a {screen}: prefix to any existing padding utility.
For example, use .md:p-4 to apply the p-4 utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:p-4, add "padding" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"padding",
);