Sizing & spacing

.joy-w-full, .joy-max-w-sm (480px), and .joy-max-w-md (720px) are on Utilities already. Everything else — height, min/max, fractions, and the full margin/padding matrix — is here.

Width

Class	CSS
`.joy-w-0`	width: 0
`.joy-w-auto`	width: auto
`.joy-w-screen`	width: 100vw
`.joy-w-min/max/fit`	width: min-content / max-content / fit-content
`.joy-w-1/2`, `.joy-w-1/3`, `.joy-w-2/3`, `.joy-w-1/4`, `.joy-w-3/4`	fraction widths (50%, 33.33%, 66.67%, 25%, 75%)

1/3

2/3

<div class="joy-flex joy-gap-2">
    <div class="joy-w-1/3" style="background:rgba(127,127,127,.1);padding:8px;border-radius:8px;">1/3</div>
    <div class="joy-w-2/3" style="background:rgba(127,127,127,.1);padding:8px;border-radius:8px;">2/3</div>
</div>

Min / max width

Class	CSS
`.joy-min-w-0`	min-width: 0 — useful on flex children that need to shrink below their content size
`.joy-min-w-full/min/max/fit`	min-width
`.joy-max-w-xs`	max-width: 20rem (320px)
`.joy-max-w-lg`	max-width: 60rem (960px)
`.joy-max-w-xl`	max-width: 70rem (1120px)
`.joy-max-w-2xl`	max-width: 80rem (1280px)
`.joy-max-w-full/screen/none`	max-width: 100% / 100vw / none

Height

Class	CSS
`.joy-h-0`	height: 0
`.joy-h-auto`	height: auto
`.joy-h-full`	height: 100%
`.joy-h-screen`	height: 100vh
`.joy-h-min/max/fit`	height: min-content / max-content / fit-content
`.joy-h-1/2`, `.joy-h-1/3`, `.joy-h-2/3`	fraction heights

Min / max height

Class	CSS
`.joy-min-h-0/full/screen`	min-height
`.joy-max-h-full/screen/none`	max-height

Inline size

The writing-mode-aware equivalent of width — inline-size follows text direction instead of always meaning horizontal, which matters for right-to-left or vertical writing modes:

Class	CSS
`.joy-inline-size-auto/full`	inline-size: auto / 100%
`.joy-inline-size-min/max/fit`	inline-size: min-content / max-content / fit-content

Margin

The existing .joy-mt-2…6, .joy-mb-0/2…5, and .joy-mx-auto classes on Utilities still work. This is the complete scale, all sides, steps 0–8 (mapped to --joy-space-0…8) plus auto:

Class pattern	Sides
`.joy-m-{0-8\|auto}`	all four sides
`.joy-mt-{0-8\|auto}`	top
`.joy-mr-{0-8\|auto}`	right
`.joy-mb-{0-8\|auto}`	bottom
`.joy-ml-{0-8\|auto}`	left
`.joy-mx-{0-4}`	left + right
`.joy-my-{0-4,6}`	top + bottom

mx-auto centers a block with a set width

<div class="joy-mx-auto" style="width:fit-content;background:rgba(127,127,127,.1);padding:8px 16px;border-radius:8px;">mx-auto centers a block with a set width</div>

Padding

Same shape as margin, without the auto keyword (padding never takes one):

Class pattern	Sides
`.joy-p-{0-8}`	all four sides
`.joy-pt-{0-6}`	top
`.joy-pr-{0-5}`	right
`.joy-pb-{0-6}`	bottom
`.joy-pl-{0-5}`	left
`.joy-px-{0-3,5,6}`	left + right (existing `.joy-px-4` still works, fills the gap)
`.joy-py-{0,1,3,5,6}`	top + bottom (existing `.joy-py-2`/`.joy-py-4` still work, fill the gaps)

p-5 on all sides

<div class="joy-p-5" style="background:rgba(127,127,127,.1);border-radius:12px;">p-5 on all sides</div>