padding

Utilities for controlling an element's padding.

Examples

Basic example

Use p-<number> utilities like p-4 and p-8 to control the padding on all sides of an element:

<div class="p-8 ...">p-8</div>

Adding padding to one side

Use pt-<number>, pr-<number>, pb-<number> and pl-<number> utilities like pt-6 and pr-4 to control the padding on one side of an element:

<div class="pt-6 ...">pt-6</div>
<div class="pr-4 ...">pr-4</div>
<div class="pb-8 ...">pb-8</div>
<div class="pl-2 ...">pl-2</div>

Adding horizontal padding

Use px-<number> utilities like px-4 and px-8 to control the horizontal padding of an element:

<div class="px-8 ...">px-8</div>

Adding vertical padding

Use py-<number> utilities like py-4 and py-8 to control the vertical padding of an element:

<div class="py-8 ...">py-8</div>

Using a custom value

Use utilities like p-[<value>] to set the padding based on a completely custom value:

<div class="p-[5px] ...">
  <!-- ... -->
</div>

Responsive design

Prefix a padding utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="py-4 md:py-8 ...">
  <!-- ... -->
</div>

Customizing your theme

Use the --spacing and other theme variables to customise the values these utilities generate:

@theme {
  --spacing: 1px;
}