Sections

Padding

Utilities for controlling an element’s padding.

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.

.p-4

.p-6

.p-8

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

.pl-4

.pr-4

.pb-4

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

.px-4

.py-4

<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",
);