Press/to search

Spacing

Padding

Utilities for controls padding in 0.25rem increments.

Class

classcss
p-pxpadding: 1px
p-0padding: 0
p-1padding: 0.25rem
p-2padding: 0.5rem
p-3padding: 0.75rem
p-4padding: 1rem
p-5padding: 1.25rem
p-6padding: 1.5rem
p-8padding: 2rem
p-10padding: 2.5rem
p-12padding: 3rem
p-16padding: 4rem
p-20padding: 5rem
p-24padding: 6rem
p-32padding: 8rem
p-40padding: 10rem
p-48padding: 12rem
p-56padding: 14rem
p-64padding: 16rem
p-72 v1.1.3padding: 18rem
p-80 v1.1.3padding: 20rem
p-88 v1.1.3padding: 22rem
p-96 v1.1.3padding: 24rem
p-104 v1.1.3padding: 26rem
p-112 v1.1.3padding: 28rem
px-pxpadding-right: 1px;
padding-left: 1px
px-0padding-right: 0;
padding-left: 0
px-1padding-right: 0.25rem;
padding-left: 0.25rem
px-2padding-right: 0.5rem;
padding-left: 0.5rem
px-3padding-right: 0.75rem;
padding-left: 0.75rem
px-4padding-right: 1rem;
padding-left: 1rem
px-5padding-right: 1.25rem;
padding-left: 1.25rem
px-6padding-right: 1.5rem;
padding-left: 1.5rem
px-8padding-right: 2rem;
padding-left: 2rem
px-10padding-right: 2.5rem;
padding-left: 2.5rem
px-12padding-right: 3rem;
padding-left: 3rem
px-16padding-right: 4rem;
padding-left: 4rem
px-20padding-right: 5rem;
padding-left: 5rem
px-24padding-right: 6rem;
padding-left: 6rem
px-32padding-right: 8rem;
padding-left: 8rem
px-40padding-right: 10rem;
padding-left: 10rem
px-48padding-right: 12rem;
padding-left: 12rem
px-56padding-right: 14rem;
padding-left: 14rem
px-64padding-right: 16rem;
padding-left: 16rem
px-72 v1.1.3padding-right: 18rem;
padding-left: 18rem
px-80 v1.1.3padding-right: 20rem;
padding-left: 20rem
px-88 v1.1.3padding-right: 22rem;
padding-left: 22rem
px-96 v1.1.3padding-right: 24rem;
padding-left: 24rem
px-104 v1.1.3padding-right: 26rem;
padding-left: 26rem
px-112 v1.1.3padding-right: 28rem;
padding-left: 28rem
py-pxpadding-top: 1px;
padding-bottom: 1px
py-0padding-top: 0;
padding-bottom: 0
py-1padding-top: 0.25rem;
padding-bottom: 0.25rem
py-2padding-top: 0.5rem;
padding-bottom: 0.5rem
py-3padding-top: 0.75rem;
padding-bottom: 0.75rem
py-4padding-top: 1rem;
padding-bottom: 1rem
py-5padding-top: 1.25rem;
padding-bottom: 1.25rem
py-6padding-top: 1.5rem;
padding-bottom: 1.5rem
py-8padding-top: 2rem;
padding-bottom: 2rem
py-10padding-top: 2.5rem;
padding-bottom: 2.5rem
py-12padding-top: 3rem;
padding-bottom: 3rem
py-16padding-top: 4rem;
padding-bottom: 4rem
py-20padding-top: 5rem;
padding-bottom: 5rem
py-24padding-top: 6rem;
padding-bottom: 6rem
py-32padding-top: 8rem;
padding-bottom: 8rem
py-40padding-top: 10rem;
padding-bottom: 10rem
py-48padding-top: 12rem;
padding-bottom: 12rem
py-56padding-top: 14rem;
padding-bottom: 14rem
py-64padding-top: 16rem;
padding-bottom: 16rem
py-72 v1.1.3padding-top: 18rem;
padding-bottom: 18rem
py-80 v1.1.3padding-top: 20rem;
padding-bottom: 20rem
py-88 v1.1.3padding-top: 22rem;
padding-bottom: 22rem
py-96 v1.1.3padding-top: 24rem;
padding-bottom: 24rem
py-104 v1.1.3padding-top: 26rem;
padding-bottom: 26rem
py-112 v1.1.3padding-top: 28rem;
padding-bottom: 28rem
pt-pxpadding-top: 1px
pt-0padding-top: 0
pt-1padding-top: 0.25rem
pt-2padding-top: 0.5rem
pt-3padding-top: 0.75rem
pt-4padding-top: 1rem
pt-5padding-top: 1.25rem
pt-6padding-top: 1.5rem
pt-8padding-top: 2rem
pt-10padding-top: 2.5rem
pt-12padding-top: 3rem
pt-16padding-top: 4rem
pt-20padding-top: 5rem
pt-24padding-top: 6rem
pt-32padding-top: 8rem
pt-40padding-top: 10rem
pt-48padding-top: 12rem
pt-56padding-top: 14rem
pt-64padding-top: 16rem
pt-72 v1.1.3padding-top: 18rem
pt-80 v1.1.3padding-top: 20rem
pt-88 v1.1.3padding-top: 22rem
pt-96 v1.1.3padding-top: 24rem
pt-104 v1.1.3padding-top: 26rem
pt-112 v1.1.3padding-top: 28rem
pr-pxpadding-right: 1px
pr-0padding-right: 0
pr-1padding-right: 0.25rem
pr-2padding-right: 0.5rem
pr-3padding-right: 0.75rem
pr-4padding-right: 1rem
pr-5padding-right: 1.25rem
pr-6padding-right: 1.5rem
pr-8padding-right: 2rem
pr-10padding-right: 2.5rem
pr-12padding-right: 3rem
pr-16padding-right: 4rem
pr-20padding-right: 5rem
pr-24padding-right: 6rem
pr-32padding-right: 8rem
pr-40padding-right: 10rem
pr-48padding-right: 12rem
pr-56padding-right: 14rem
pr-64padding-right: 16rem
pr-72 v1.1.3padding-right: 18rem
pr-80 v1.1.3padding-right: 20rem
pr-88 v1.1.3padding-right: 22rem
pr-96 v1.1.3padding-right: 24rem
pr-104 v1.1.3padding-right: 26rem
pr-112 v1.1.3padding-right: 28rem
pb-pxpadding-bottom: 1px
pb-0padding-bottom: 0
pb-1padding-bottom: 0.25rem
pb-2padding-bottom: 0.5rem
pb-3padding-bottom: 0.75rem
pb-4padding-bottom: 1rem
pb-5padding-bottom: 1.25rem
pb-6padding-bottom: 1.5rem
pb-8padding-bottom: 2rem
pb-10padding-bottom: 2.5rem
pb-12padding-bottom: 3rem
pb-16padding-bottom: 4rem
pb-20padding-bottom: 5rem
pb-24padding-bottom: 6rem
pb-32padding-bottom: 8rem
pb-40padding-bottom: 10rem
pb-48padding-bottom: 12rem
pb-56padding-bottom: 14rem
pb-64padding-bottom: 16rem
pb-72 v1.1.3padding-bottom: 18rem
pb-80 v1.1.3padding-bottom: 20rem
pb-88 v1.1.3padding-bottom: 22rem
pb-96 v1.1.3padding-bottom: 24rem
pb-104 v1.1.3padding-bottom: 26rem
pb-112 v1.1.3padding-bottom: 28rem
pl-pxpadding-left: 1px
pl-0padding-left: 0
pl-1padding-left: 0.25rem
pl-2padding-left: 0.5rem
pl-3padding-left: 0.75rem
pl-4padding-left: 1rem
pl-5padding-left: 1.25rem
pl-6padding-left: 1.5rem
pl-8padding-left: 2rem
pl-10padding-left: 2.5rem
pl-12padding-left: 3rem
pl-16padding-left: 4rem
pl-20padding-left: 5rem
pl-24padding-left: 6rem
pl-32padding-left: 8rem
pl-40padding-left: 10rem
pl-48padding-left: 12rem
pl-56padding-left: 14rem
pl-64padding-left: 16rem
pl-72 v1.1.3padding-left: 18rem
pl-80 v1.1.3padding-left: 20rem
pl-88 v1.1.3padding-left: 22rem
pl-96 v1.1.3padding-left: 24rem
pl-104 v1.1.3padding-left: 26rem
pl-112 v1.1.3padding-left: 28rem

Usage

Set padding to top, bottom, left and right.

<!-- Example -->
<y class="p-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set padding to left and right.

<!-- Example -->
<y class="px-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set padding to top and bottom.

<!-- Example -->
<y class="py-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set padding to top.

<!-- Example -->
<y class="pt-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set padding to bottom.

<!-- Example -->
<y class="pb-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set padding to left.

<!-- Example -->
<y class="pl-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Set padding to right.

<!-- Example -->
<y class="pr-6 ... bg-gray-400">
  <y class="... w-full h-32 bg-gray-500"></y>
</y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
  $class: 'p',
  $property: padding,
  $modifier: (
    1: .25rem,
    2: 5rem
    //...
  )
);

// Add Variants
@include yogurt(
  $class: 'p',
  $property: padding,
  $modifier: (
    1: .25rem,
    2: 5rem
    //...
  ),
  $variant: (
    'responsive'
  )
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.