Spacing

Two letters drive spacing — p for padding, m for margin — followed by an optional side and a value. Numeric values are interpreted as px. Arbitrary values pass through.

Pattern

chai-{p|m}{side?}-{value}

Side	Property
none	All four sides
x	left + right
y	top + bottom
t	top
r	right
b	bottom
l	left

Padding

Class	CSS
chai-p-0	padding: 0px
chai-p-2	padding: 2px
chai-p-4	padding: 4px
chai-px-8	padding-left: 8px; padding-right: 8px
chai-py-12	padding-top: 12px; padding-bottom: 12px
chai-pt-1	padding-top: 1px
chai-pr-3	padding-right: 3px
chai-pb-6	padding-bottom: 6px
chai-pl-2	padding-left: 2px
chai-p-[1.5rem]	padding: 1.5rem

Margin

Same shape as padding — replace the leading p with m.

Class	CSS
chai-m-0	margin: 0px
chai-m-4	margin: 4px
chai-mx-auto	margin-left: auto; margin-right: auto
chai-mt-8	margin-top: 8px
chai-mb-[2rem]	margin-bottom: 2rem

Gap

Spacing for flex and grid containers is covered in Flex & Grid.

Notes

• Numeric values are px, not Tailwind’s 0.25rem-per-step scale. chai-p-4 is 4px, not 1rem. This is intentional — it makes the value readable from the class name without consulting a chart.
• For rem-based spacing, use arbitrary values: chai-p-[1rem].
• Negative values aren’t supported in v1. If you need them, write chai-mt-[-12px] with brackets.