Layout

Layout props control how elements are positioned, displayed, and flow within the document.

Display

sz prop	Tailwind class
{ display: 'flex' }	flex
{ display: 'grid' }	grid
{ display: 'block' }	block
{ display: 'inline-block' }	inline-block
{ display: 'inline' }	inline
{ display: 'none' }	hidden
{ display: 'contents' }	contents
{ display: 'inline-flex' }	inline-flex
{ display: 'inline-grid' }	inline-grid
{ display: 'flow-root' }	flow-root
{ srOnly: true }	sr-only

{ display: 'flex' } — children laid out in a row

{ display: 'block' } vs { display: 'inline-block' }

block (full width)

inlineblock

Position

sz prop	Tailwind class
{ position: 'relative' }	relative
{ position: 'absolute' }	absolute
{ position: 'fixed' }	fixed
{ position: 'sticky' }	sticky
{ position: 'static' }	static

relative parent + absolute child overlay

parent

abs

Inset (Top / Right / Bottom / Left)

sz prop	Tailwind class
{ inset: 4 }	inset-4
{ inset: 'auto' }	inset-auto
{ inset: 'full' }	inset-full
{ insetX: 4 }	inset-x-4
{ insetY: 4 }	inset-y-4
{ top: 0 }	top-0
{ right: 4 }	right-4
{ bottom: 0 }	bottom-0
{ left: 4 }	left-4
{ inset: '-px' }	-inset-px

Overflow

sz prop	Tailwind class
{ overflow: 'hidden' }	overflow-hidden
{ overflow: 'auto' }	overflow-auto
{ overflow: 'scroll' }	overflow-scroll
{ overflow: 'visible' }	overflow-visible
{ overflow: 'clip' }	overflow-clip
{ overflowX: 'auto' }	overflow-x-auto
{ overflowY: 'hidden' }	overflow-y-hidden

{ overflow: 'hidden' } — long text clipped to box

This text is intentionally long and will be clipped by overflow-hidden at the box boundary.

Visibility

sz prop	Tailwind class
{ visibility: 'visible' }	visible
{ visibility: 'hidden' }	invisible
{ visibility: 'collapse' }	collapse

Z-Index

sz prop	Tailwind class
{ z: 10 }	z-10
{ z: 50 }	z-50
{ z: -1 }	-z-1
{ z: 'auto' }	z-auto

z-index — higher z stacks on top

z-10

z-20 (top)

Box Sizing

sz prop	Tailwind class
{ box: 'border' }	box-border
{ box: 'content' }	box-content

Float & Clear

sz prop	Tailwind class
{ float: 'right' }	float-right
{ float: 'left' }	float-left
{ float: 'none' }	float-none
{ clear: 'both' }	clear-both
{ clear: 'left' }	clear-left

Aspect Ratio

sz prop	Tailwind class
{ aspect: 'auto' }	aspect-auto
{ aspect: 'square' }	aspect-square
{ aspect: 'video' }	aspect-video
{ aspect: '4/3' }	aspect-4/3

aspect ratio comparison

1:1

16:9

Object Fit / Position

sz prop	Tailwind class
{ objectFit: 'cover' }	object-cover
{ objectFit: 'contain' }	object-contain
{ objectFit: 'fill' }	object-fill
{ objectPos: 'center' }	object-center
{ objectPos: 'top' }	object-top

Examples

// Absolutely positioned overlay
<div sz={{ position: 'relative' }}>
  <div sz={{
    position: 'absolute',
    inset: 0,
    bg: 'black',
    opacity: 50,
  }} />
</div>

// Sticky header
<header sz={{
  position: 'sticky',
  top: 0,
  z: 50,
  bg: 'white',
  borderB: 1,
  borderColor: 'gray-200',
}} />

// Scrollable container
<div sz={{
  overflow: 'hidden',
  overflowY: 'auto',
  h: 64,
}} />