Styling Utilities

Framework-agnostic spacing utility classes and viewport breakpoints shipped alongside the design tokens.

Styling utilities are small, generated CSS building blocks that sit next to the token system — usable whether or not a consumer extends the Tailwind preset.

Spacing — .ui-p-*/.ui-m-*/.ui-gap-* padding, margin, and gap classes generated from the design system's spacing scale.
Breakpoints — the viewport breakpoint scale, as Tailwind @theme values, --ui-breakpoint-* CSS variables, and JS constants.

For color, typography, and component tokens, see Token reference and Typography.

Edit on GitHub