Token families

A token family connects a class prefix to a token namespace and the CSS properties it writes. These tables list every family registered by the preset, including families without preset values.

Read a family

The key alone does not identify a token. In p-md, p- reads the spacing namespace and md selects --spacing-md. The same key in another family can select a different token.

Each row resolves independently. The repeated md is a key within a namespace, not one global value shared by these classes.

Text description

1. p-md selects --spacing-md and writes padding: var(--spacing-md).
2. max-w-md selects --container-md and writes max-width: var(--container-md).
3. font-md selects --font-size-md and writes font-size: var(--font-size-md). In the preset, md uniquely selects the font-size namespace among the font- families.
4. The highlighted md fragments are the same key in separate namespaces. The arrows indicate lookup and property mapping, not dependencies between the three rows. The figure omits theme values and layer wrappers; the generated example below includes both.

<div class="p-md max-w-md font-md">Content</div>

@layer theme {  :root,  :host {    --font-size-md: 1rem;    --spacing-md: 1rem;    --container-md: 28rem  }}@layer utilities {  .font-md {    font-size: var(--font-size-md)  }  .max-w-md {    max-width: var(--container-md)  }  .p-md {    padding: var(--spacing-md)  }}

Read each row as prefix → token name pattern → native properties. Replace * with a registered key. The linked value pages list available keys; the namespace column identifies the tokens the family accepts.

Color palette and Color roles

Values in Color palette and Color roles.

Spacing

Values in Spacing.

Container sizes

Values in Container sizes.

Radius

Values in Radius.

Shadow

Values in Shadow.

Font

Values in Font.

Text

Values in Text.

Leading

Values in Leading.

Tracking

Values in Tracking.

Motion

Values in Motion.

Resolution boundaries

font- has separate families for --font-family-*, --font-size-* and --font-weight-*. A key must select one of them. If the key exists in more than one of these namespaces, the class is ambiguous and emits no CSS.

Register tokens in @theme. A native custom property outside it does not register a key, and a new namespace does not automatically create a utility family. Define a matching @utility pattern when adding a new family.

--color-text-muted belongs to the color namespace with key text-muted. Color roles use the same families as palette colors; they are not separate utility namespaces.

This index describes token-consuming families. Fixed spellings, such as w-full, keep their definition even when a token has the same key. Direct-value functions, such as p(4), and native declarations, such as (padding:1rem), accept values without a token lookup.

See token registration and resolution, utility definitions, declaration forms and building a theme.