Layout

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

Display

sz prop	Tailwind class
{ flex: true }	flex
{ grid: true }	grid
{ block: true }	block
{ inlineBlock: true }	inline-block
{ inline: true }	inline
{ hidden: true }	hidden
{ contents: true }	contents
{ inlineFlex: true }	inline-flex
{ inlineGrid: true }	inline-grid
{ flowRoot: true }	flow-root
{ srOnly: true }	sr-only

{ flex: true } — children laid out in a row

{ block: true } vs { inlineBlock: true }

block (full width)

inlineblock

Position

sz prop	Tailwind class
{ relative: true }	relative
{ absolute: true }	absolute
{ fixed: true }	fixed
{ sticky: true }	sticky
{ static: true }	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
{ visible: true }	visible
{ invisible: true }	invisible
{ collapse: true }	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={{ relative: true }}>
  <div sz={{
    absolute: true,
    inset: 0,
    bg: 'black',
    opacity: 50,
  }} />
</div>

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

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