Numeric Scale (0-20)

Values: 0, 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 5 (1.25rem), 6 (1.5rem), 8 (2rem), 10 (2.5rem), 12 (3rem), 16 (4rem), 20 (5rem)

Classes: m-0, m-4, mt-2, mr-4, mb-6, ml-8, mx-4, my-2

Semantic Scale

Values: 0, xs, sm, md, base, lg, xl, 2xl

Classes: m-xs, mt-sm, mb-md, mx-lg, my-xl, m-2xl

Auto Margins

Classes: m-auto, mx-auto, my-auto, ml-auto, mr-auto

Live Example

Using mr-auto to push element left:

Same scale as margin: numeric (0-20) and semantic (xs, sm, md, base, lg, xl, 2xl)

Type	Classes
Numeric	p-0, p-4, pt-2, px-6, py-4
Semantic	p-xs, p-sm, p-md, p-lg, px-xl

Live Example

Boxes showing different padding sizes:

Semantic Gap

For flex/grid containers:

Classes: gap-xs, gap-sm, gap-md, gap-lg, gap-xl, gap-2xl

Directional: row-gap-*, column-gap-*

Numeric Gap (pixels)

Classes: gap-1 (1px), gap-2 (2px), gap-4 (4px), gap-8 (8px), gap-10 (10px), gap-20 (20px)

Live Example

Percentage Width (5% increments)

Classes: w-5 through w-100, plus w-auto

Fraction Width

Class	Value
w-1-2	50%
w-1-3	33.3%
w-2-3	66.7%
w-1-4	25%
w-3-4	75%

REM Width

Classes: wr-1 through wr-50 (1rem to 50rem)

Examples: wr-5, wr-10, wr-15, wr-20, wr-30

Type	Classes	Examples
Min-Width (%)	minw-5 through minw-100	minw-25, minw-50, minw-1-3
Max-Width (%)	maxw-5 through maxw-100	maxw-50, maxw-75, maxw-2-3
Min-Width (REM)	minwr-1 through minwr-50	minwr-10, minwr-20
Max-Width (REM)	maxwr-1 through maxwr-50	maxwr-20, maxwr-30

Type	Classes
Percentage	h-25, h-50, h-75, h-100, h-auto
REM Height	hr-1 through hr-50
REM Height (x notation)	h-2x through h-50x
Min/Max Height	min-h-5x, max-h-20x, minhr-10, maxhr-30

Live Example

Boxes with different heights:

Classes: d-none, d-inline, d-inline-block, d-block, d-flex, d-inline-flex

Live Example

d-inline vs d-block:

Category	Classes
Direction & Wrap	flex-row, flex-column, flex-wrap, flex-nowrap
Justify Content	justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
Align Items	align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch
Flex Properties	flex-fill, flex-grow-0, flex-grow-1, flex-shrink-0, flex-shrink-1
Align Self	self-start, self-center, self-end, self-stretch, self-baseline

Live Examples

justify-content-between:

align-items-center with different heights:

Category	Classes
Alignment	text-left, text-center, text-right
Wrapping	text-nowrap, text-truncate
Font Size	text-2xs, text-xs, text-sm, text-base, text-lg, text-xl, text-2xl

Font Size Scale

Border Radius Examples

Classes: shadow-none, shadow-sm, shadow, shadow-lg

Spacing (Margin & Padding)

• m-{0-20}, p-{0-20} - Numeric scale (0.25rem increments)
• m-{xs|sm|md|base|lg|xl|2xl} - Semantic margin
• p-{xs|sm|md|base|lg|xl|2xl} - Semantic padding
• mt-*, mr-*, mb-*, ml-* - Directional
• mx-*, my-* - Horizontal/vertical axis
• m-auto, mx-auto, ml-auto, mr-auto - Auto margins

Gap

• gap-{xs|sm|md|base|lg|xl|2xl} - Semantic gap
• gap-{1-20} - Numeric gap (0.1rem increments)
• row-gap-*, column-gap-* - Directional gap

Width

• w-{5-100} - Percentage width (5% increments)
• w-{1-2|1-3|2-3|1-4|3-4} - Fraction width
• wr-{1-50} - REM width
• minw-{5-100}, maxw-{5-100} - Min/max percentage
• minwr-{1-50}, maxwr-{1-50} - Min/max REM
• w-{25|50|75|100}-fixed - Fixed width (min + width)

Height

• h-{25|50|75|100|auto} - Percentage height
• hr-{1-50} - REM height
• h-{2-50}x - REM height (x notation)
• min-h-{2-30}x, max-h-{5-50}x - Min/max REM
• minhr-{1-50}, maxhr-{1-50} - Min/max REM (alternative)

Display

• d-none, d-block, d-inline, d-inline-block
• d-flex, d-inline-flex

Flexbox

• flex-row, flex-column, flex-wrap, flex-nowrap
• justify-content-{start|end|center|between|around}
• align-items-{start|end|center|baseline|stretch}
• flex-fill, flex-grow-{0|1}, flex-shrink-{0|1}
• self-{start|center|end|stretch|baseline}

Text

• text-left, text-center, text-right
• text-nowrap, text-truncate
• text-{2xs|xs|sm|md|base|lg|xl|2xl|3xl|4xl} - Font size
• text-{primary|success|danger|warning|info} - Semantic colors

Overflow

• overflow-{auto|hidden|visible}
• overflow-{x|y}-auto
• overflow-overlay, overflow-{x|y}-overlay

Cursor

• cursor-{pointer|help|wait|not-allowed|text|move|default}
• cursor-{grab|grabbing|zoom-in|zoom-out}

Position

• position-{static|relative|absolute|fixed|sticky}

Border

• border, border-{top|right|bottom|left}
• border-0, border-{top|right|bottom|left}-0
• border-{solid|dashed|dotted|none}
• rounded, rounded-lg, rounded-circle, rounded-0
• rounded-{top|bottom|left|right}

Shadow

• shadow-none, shadow-sm, shadow, shadow-lg