Sizing

Width

sz prop	Tailwind class	Preview
{ w: 4 }	w-4
{ w: 'full' }	w-full
{ w: 'screen' }	w-screen
{ w: 'auto' }	w-auto
{ w: '1/2' }	w-1/2
{ w: '1/3' }	w-1/3
{ w: 'min' }	w-min
{ w: 'max' }	w-max
{ w: 'fit' }	w-fit
{ w: 'px' }	w-px
{ w: '333px' }	w-[333px]
{ w: '--w' }	w-(--w)

width scale — w-8, w-16, w-32

w-8

w-16

w-32

Min / Max Width

sz prop	Tailwind class
{ minW: 0 }	min-w-0
{ minW: 'full' }	min-w-full
{ maxW: 'sm' }	max-w-sm
{ maxW: 'md' }	max-w-md
{ maxW: 'lg' }	max-w-lg
{ maxW: 'xl' }	max-w-xl
{ maxW: '2xl' }	max-w-2xl
{ maxW: '4xl' }	max-w-4xl
{ maxW: '7xl' }	max-w-7xl
{ maxW: 'none' }	max-w-none
{ maxW: 'prose' }	max-w-prose

{ maxW: 'xs' } — box constrained with overflowing text truncated

max-w-xs constrains this content to a narrow column no matter how wide the text is.

Height

sz prop	Tailwind class	Preview
{ h: 4 }	h-4
{ h: 'full' }	h-full
{ h: 'screen' }	h-screen
{ h: 'dvh' }	h-dvh
{ h: 'svh' }	h-svh
{ h: 'auto' }	h-auto
{ h: 'fit' }	h-fit
{ h: 'min' }	h-min
{ minH: 'screen' }	min-h-screen
{ maxH: 64 }	max-h-64
{ maxH: 'none' }	max-h-none

height scale — h-8, h-16, h-32

h-8

h-16

h-32

Size (Width + Height Together)

sz prop	Tailwind class	Preview
{ size: 4 }	size-4
{ size: 'full' }	size-full
{ size: '1/2' }	size-1/2
{ size: 'fit' }	size-fit
{ size: 'px' }	size-px

{ size: 12, rounded: 'full' } — square and circle

sq

circle

{ rounded: 'full' } — click to morph between square and circle

square

Make circle

Logical Sizing (v4.2)

New in v4.2

blockSize is the logical equivalent of height (maps to block-size). inlineSize is the logical equivalent of width (maps to inline-size). These follow the writing direction and are useful for RTL/vertical text.

sz prop	Tailwind class
{ blockSize: 4 }	block-4
{ blockSize: 'full' }	block-full
{ blockSize: 'screen' }	block-screen
{ minBlockSize: 8 }	min-block-8
{ maxBlockSize: 64 }	max-block-64
{ inlineSize: 4 }	inline-4
{ inlineSize: 'full' }	inline-full
{ minInlineSize: 8 }	min-inline-8
{ maxInlineSize: 64 }	max-inline-64

Examples

// Responsive sizing
<img sz={{
  w: 'full',
  h: 48,
  objectFit: 'cover',
  md: { h: 64 },
  lg: { h: 96 },
}} />

// Square icon
<div sz={{ size: 10, rounded: 'full', bg: 'blue-500' }} />

// Constrained content width
<main sz={{ maxW: '4xl', mx: 'auto', px: 4 }}>
  Content
</main>

// Full viewport height with scrollable body
<div sz={{ minH: 'screen', flex: true, flexDir: 'col' }}>
  <header />
  <main sz={{ flex: true, grow: true }} />
  <footer />
</div>