Padding

Use padding utilities to control the space between an element’s border and its content. Tailwind v4 ships physical (pt/pr/pb/pl), inline-axis logical (ps/pe), and block-axis logical (pbs/pbe) variants on the same spacing scale.

Basic example

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

Style('p-8 ...', child: Text('p-8'))

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.

Style('pt-6 ...', child: Text('pt-6'))
Style('pr-4 ...', child: Text('pr-4'))
Style('pb-8 ...', child: Text('pb-8'))
Style('pl-2 ...', child: Text('pl-2'))

Adding horizontal padding

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

Style('px-8 ...', child: Text('px-8'))

Adding vertical padding

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

Style('py-8 ...', child: Text('py-8'))

Using logical properties

Use ps-<number> or pe-<number> utilities to set the padding-inline-start and padding-inline-end logical properties, which map to either the left or right side based on the ambient Directionality. The block-axis siblings pbs-<number> / pbe-<number> map to physical top/bottom in Flutter’s horizontal writing mode (the only writing mode Flutter supports).

Directionality(
  textDirection: TextDirection.ltr,
  child: Style('ps-8 ...', child: Text('ps-8')),
)
Directionality(
  textDirection: TextDirection.ltr,
  child: Style('pe-8 ...', child: Text('pe-8')),
)
Directionality(
  textDirection: TextDirection.rtl,
  child: Style('ps-8 ...', child: Text('ps-8')),
)
Directionality(
  textDirection: TextDirection.rtl,
  child: Style('pe-8 ...', child: Text('pe-8')),
)

Class reference

Class	CSS property
p-<n> / p-px / p-[<v>]	padding
px-<n> / px-px / px-[<v>]	padding-inline
py-<n> / py-px / py-[<v>]	padding-block
ps-<n> / ps-px / ps-[<v>]	padding-inline-start
pe-<n> / pe-px / pe-[<v>]	padding-inline-end
pbs-<n> / pbs-px / pbs-[<v>]	padding-block-start (= top)
pbe-<n> / pbe-px / pbe-[<v>]	padding-block-end (= bottom)
pt-<n> / pt-px / pt-[<v>]	padding-top
pr-<n> / pr-px / pr-[<v>]	padding-right
pb-<n> / pb-px / pb-[<v>]	padding-bottom
pl-<n> / pl-px / pl-[<v>]	padding-left

All padding utilities share the same spacing scale (<n> = number from the spacing token map, e.g. 4 → 16px). Arbitrary values use bracket syntax: p-[12px], px-[1.5rem]. Unit suffixes are stripped (Flutter uses logical pixels).

Custom properties

p-(<custom-property>) and the per-prefix variants are resolved against theme-defined StyleThemeData.customProperties — e.g. p-(--my-padding) behaves like p-[1.5rem] when the theme defines --my-padding: '1.5rem'. Cascade-inherited or JS-set CSS variables remain out of scope.