Spacing

Padding

sz prop	Tailwind class	Preview
{ p: 4 }	p-4
{ px: 6 }	px-6
{ py: 2 }	py-2
{ pt: 4 }	pt-4
{ pr: 2 }	pr-2
{ pb: 4 }	pb-4
{ pl: 2 }	pl-2
{ ps: 4 }	ps-4	ABC
{ pe: 4 }	pe-4	ABC
{ p: 'px' }	p-px
{ p: '5px' }	p-[5px]
{ p: '--p' }	p-(--p)

New in v4.2

Block-direction padding: { pbs: 4 } → pbs-4 (padding-block-start), { pbe: 4 } → pbe-4 (padding-block-end).

padding scale — p-2, p-4, p-8

p-2

p-4

p-8

{ px: 8, py: 2 } — asymmetric padding

Button

Margin

sz prop	Tailwind class	Preview
{ m: 4 }	m-4
{ mx: 'auto' }	mx-auto
{ my: 6 }	my-6
{ mt: 4 }	mt-4
{ mr: 2 }	mr-2
{ mb: 8 }	mb-8
{ ml: 2 }	ml-2
{ ms: 4 }	ms-4
{ me: 4 }	me-4
{ m: -4 }	-m-4
{ mt: -2 }	-mt-2
{ m: 'px' }	m-px

New in v4.2

Block-direction margin: { mbs: 4 } → mbs-4 (margin-block-start), { mbe: 4 } → mbe-4 (margin-block-end). Both support negative values.

{ mx: 'auto' } — horizontally centered box

mx-auto

Space Between

Controls spacing between child elements (alternative to gap):

sz prop	Tailwind class
{ spaceX: 4 }	space-x-4
{ spaceY: 4 }	space-y-4
{ spaceX: -2 }	-space-x-2
{ spaceXReverse: true }	space-x-reverse
{ spaceYReverse: true }	space-y-reverse
{ spaceX: 'px' }	space-x-px
{ spaceX: '--space' }	space-x-(--space)

spaceX scale — 1, 4, 8

A

B

C

spaceX-1

A

B

C

spaceX-4

A

B

C

spaceX-8

spaceY scale — 1, 4, 8

A

B

C

spaceY-1

A

B

C

spaceY-4

A

B

C

spaceY-8

Examples

// Card with internal padding and margin
<div sz={{ p: 6, m: 4, bg: 'white', rounded: 'lg' }}>
  <h2 sz={{ mb: 4, text: 'xl', fontWeight: 'bold' }}>Title</h2>
  <p sz={{ mb: 0 }}>Content</p>
</div>

// Centered container
<div sz={{ maxW: '4xl', mx: 'auto', px: 4 }}>
  Page content
</div>

// Inline elements with space between
<div sz={{ flex: true, spaceX: 4 }}>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

// Stack with vertical spacing
<ul sz={{ spaceY: 2 }}>
  <li>First item</li>
  <li>Second item</li>
</ul>