Tokens

M3's design tokens as Tailwind utilities, named after the token they come from.

Color

Every M3 color role is a Tailwind color: md.sys.color.primary is bg-md-sys-color-primary, text-md-sys-color-primary, border-md-sys-color-primary and so on, with opacity modifiers (bg-md-sys-color-on-surface/8). Pair every container with its on-* role.

Type scale

The 15 M3 type styles are single classes that set font, weight, size, line height and tracking together. Use them without a prefix, and don't combine them with text-*, leading-*, tracking-* or font-*.

Class	Use
`md-sys-typescale-<role>-<size>`	Baseline style: roles `display`, `headline`, `title`, `body`, `label`; sizes `large`, `medium`, `small`
`md-sys-typescale-emphasized-<role>-<size>`	Same metrics, heavier weight: selected, active or unread states
`md-sys-typescale-label-{large,medium}-prominent`	The 700-weight label tokens

Line heights follow each element's lang, per M3's language-height categories. The Typography page in Storybook has the details.

Spacing

M3's spacing tokens (md.sys.measurement.space*, on an 8dp base) are registered in Tailwind's spacing namespace, so every spacing, sizing and inset utility takes them: p-spacing-200, gap-spacing-50, size-spacing-600, -mt-spacing-100. The library itself uses only these; Tailwind's numeric scale (p-4) still works in your app.

Class suffix	Token	Value
`spacing-0`	`space0`	0dp
`spacing-25`	`space25`	2dp
`spacing-50`	`space50`	4dp
`spacing-75`	`space75`	6dp
`spacing-100`	`space100`	8dp
`spacing-125`	`space125`	10dp
`spacing-150`	`space150`	12dp
`spacing-175`	`space175`	14dp
`spacing-200`	`space200`	16dp
`spacing-250`	`space250`	20dp
`spacing-300`	`space300`	24dp
`spacing-400`	`space400`	32dp
`spacing-450`	`space450`	36dp
`spacing-500`	`space500`	40dp
`spacing-600`	`space600`	48dp
`spacing-700`	`space700`	56dp
`spacing-800`	`space800`	64dp
`spacing-900`	`space900`	72dp
`spacing-1000`	library addition	80dp
`spacing-2400`	library addition	192dp
`spacing-3200`	library addition	256dp
`spacing-6400`	library addition	512dp

The number is M3's, not Tailwind's multiplier: spacing-200 is 16dp, the same as p-4. Stick to one scale per codebase so the two don't get mixed up. M3 stops at space900; spacing-1000, spacing-2400, spacing-3200 and spacing-6400 are library additions that follow the same rule. Use w-spacing-3200 for a fixed search field or max-h-spacing-6400 for a 512dp scroll-list cap.

<div class="flex flex-col gap-spacing-200 p-spacing-300">…</div>

Shape

The M3 corner scale: rounded-xs (4dp), rounded-sm (8dp), rounded-md (12dp), rounded-lg (16dp), rounded-xl (28dp) and rounded-full.

Elevation

shadow-elevation-0 to shadow-elevation-5 are the M3 elevation levels, tinted from the scheme's shadow color. Use a higher level for surfaces that sit above their neighbors (menus, floating action buttons, dialogs), not as decoration.

Motion

Color and opacity changes use the spring-based transition utilities (transition-colors md-sys-motion-effects). Anything that moves or resizes runs on JS springs; see the Motion guide.