utilities/padding

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Padding utility class prefixes and CSS properties

Tailwind v4 provides padding utilities with the following prefixes and their corresponding CSS properties: p (padding), px (padding-inline), py (padding-block), ps (padding-inline-start), pe (padding-inline-end), pbs (padding-block-start), pbe (padding-block-end), pt (padding-top), pr (padding-right), pb (padding-bottom), pl (padding-left).

Padding utility value patterns in Tailwind v4

Padding utilities support four value patterns: ${prefix}-<number> which calculates padding using calc(var(--spacing) * <number>), ${prefix}-px which sets padding to 1px, ${prefix}-(<custom-property>) which uses a CSS custom property, and ${prefix}-[<value>] which accepts arbitrary values.

All-sides padding utility usage

Use p-<number> utilities such as p-4 and p-8 to control padding on all sides of an element.

Single-side padding utilities

Use pt-<number>, pr-<number>, pb-<number>, and pl-<number> utilities to control padding on individual sides of an element. For example, pt-6 controls top padding, pr-4 controls right padding, pb-8 controls bottom padding, and pl-2 controls left padding.

Horizontal padding utility usage

Use px-<number> utilities such as px-4 and px-8 to control the horizontal padding of an element, applying the same padding to both left and right sides.

Vertical padding utility usage

Use py-<number> utilities such as py-4 and py-8 to control the vertical padding of an element, applying the same padding to both top and bottom sides.

Logical padding properties with ps and pe

Use ps-<number> (padding-inline-start) and pe-<number> (padding-inline-end) utilities to set logical padding properties that adapt to text direction. In left-to-right text, ps applies to the left and pe applies to the right. In right-to-left text, ps applies to the right and pe applies to the left.

Logical padding properties with pbs and pbe

Use pbs-<number> (padding-block-start) and pbe-<number> (padding-block-end) utilities to set logical padding properties that map to either the top or bottom side based on the writing mode.

Padding utility responsive design support

Padding utilities in Tailwind v4 support responsive design, allowing different padding values at different breakpoints using responsive modifiers.

Customizing padding spacing scale

The padding spacing scale can be customized in Tailwind v4 for all padding utilities including p, px, py, ps, pe, pbs, pbe, pt, pr, pb, and pl.

Give your agent this brain