# Utility Class Index

Every rule in the `utilities` cascade layer, read **live from the loaded
stylesheet**. Selectors are shown relative to the `.tui-interface` scope.

Utilities are one *optional* consumer of the token system — every one of
them resolves to the same primitives you can read directly. If you prefer a
clean DOM, skip the class and consume the token in your own CSS:
`gap: var(--tui-spacing-md)` instead of a gap helper. See the
[Primitive Token Index](https://storybook-tangible-ui.pages.dev/docs/reference-primitive-tokens.md).

281 rules in the \`utilities\` cascade layer. Snapshot of the compiled stylesheet of @tangible/ui 0.2.29, generated at build time.

| Selector | Declarations |
| - | - |
| `.is-align-center` | `align-items: center` |
| `.is-align-end` | `align-items: end` |
| `.is-align-self-center` | `align-self: center` |
| `.is-align-self-end` | `align-self: end` |
| `.is-align-self-start` | `align-self: start` |
| `.is-align-self-stretch` | `align-self: stretch` |
| `.is-align-start` | `align-items: start` |
| `.is-align-stretch` | `align-items: stretch` |
| `.is-density-block-lg` | `--tui-gap-block: var(--tui-spacing-lg)` |
| `.is-density-block-md` | `--tui-gap-block: var(--tui-spacing-md)` |
| `.is-density-block-none` | `--tui-gap-block: 0` |
| `.is-density-block-sm` | `--tui-gap-block: var(--tui-spacing-sm)` |
| `.is-density-block-xl` | `--tui-gap-block: var(--tui-spacing-xl)` |
| `.is-density-block-xs` | `--tui-gap-block: var(--tui-spacing-xs)` |
| `.is-density-block-xxl` | `--tui-gap-block: var(--tui-spacing-xxl)` |
| `.is-density-block-xxs` | `--tui-gap-block: var(--tui-spacing-xxs)` |
| `.is-density-inline-lg` | `--tui-gap-inline: var(--tui-spacing-lg)` |
| `.is-density-inline-md` | `--tui-gap-inline: var(--tui-spacing-md)` |
| `.is-density-inline-none` | `--tui-gap-inline: 0` |
| `.is-density-inline-sm` | `--tui-gap-inline: var(--tui-spacing-sm)` |
| `.is-density-inline-xl` | `--tui-gap-inline: var(--tui-spacing-xl)` |
| `.is-density-inline-xs` | `--tui-gap-inline: var(--tui-spacing-xs)` |
| `.is-density-inline-xxl` | `--tui-gap-inline: var(--tui-spacing-xxl)` |
| `.is-density-inline-xxs` | `--tui-gap-inline: var(--tui-spacing-xxs)` |
| `.is-density-lg` | `--tui-gap-inline: var(--tui-spacing-lg); --tui-gap-block: var(--tui-spacing-lg)` |
| `.is-density-md` | `--tui-gap-inline: var(--tui-spacing-md); --tui-gap-block: var(--tui-spacing-md)` |
| `.is-density-none` | `--tui-gap-inline: 0; --tui-gap-block: 0` |
| `.is-density-sm` | `--tui-gap-inline: var(--tui-spacing-sm); --tui-gap-block: var(--tui-spacing-sm)` |
| `.is-density-xl` | `--tui-gap-inline: var(--tui-spacing-xl); --tui-gap-block: var(--tui-spacing-xl)` |
| `.is-density-xs` | `--tui-gap-inline: var(--tui-spacing-xs); --tui-gap-block: var(--tui-spacing-xs)` |
| `.is-density-xxl` | `--tui-gap-inline: var(--tui-spacing-xxl); --tui-gap-block: var(--tui-spacing-xxl)` |
| `.is-density-xxs` | `--tui-gap-inline: var(--tui-spacing-xxs); --tui-gap-block: var(--tui-spacing-xxs)` |
| `.is-flex-fit` | `flex-basis: max-content; flex-shrink: 0` |
| `.is-flex-grow` | `flex-grow: 1` |
| `.is-flex-no-grow` | `flex-grow: 0` |
| `.is-flex-no-shrink` | `flex-shrink: 0` |
| `.is-flex-shrink` | `flex-shrink: 1` |
| `.is-justify-around` | `justify-content: space-around` |
| `.is-justify-between` | `justify-content: space-between` |
| `.is-justify-center` | `justify-content: center` |
| `.is-justify-end` | `justify-content: flex-end` |
| `.is-justify-evenly` | `justify-content: space-evenly` |
| `.is-justify-start` | `justify-content: flex-start` |
| `.is-layer-elevated` | `z-index: var(--tui-layer-elevated) !important` |
| `.is-layer-modal` | `z-index: var(--tui-layer-modal) !important` |
| `.is-layer-overlay` | `z-index: var(--tui-layer-overlay) !important` |
| `.is-layer-surface` | `z-index: var(--tui-layer-surface) !important` |
| `.is-layer-top` | `z-index: var(--tui-layer-top) !important` |
| `.is-place-center` | `place-items: center` |
| `.is-place-end` | `place-items: end` |
| `.is-place-start` | `place-items: start` |
| `.tui-border` | `border-width: var(--tui-border-width, 1px) !important; border-style: solid !important; border-color: var(--tui-color-border, currentColor) !important` |
| `.tui-border-0` | `border: 0 !important` |
| `.tui-border-block` | `border-block-width: var(--tui-border-width, 1px) !important; border-block-style: solid !important; border-block-color: var(--tui-color-border, currentColor) !important` |
| `.tui-border-block-end` | `border-block-end-width: var(--tui-border-width, 1px) !important; border-block-end-style: solid !important; border-block-end-color: var(--tui-color-border, currentColor) !important` |
| `.tui-border-block-start` | `border-block-start-width: var(--tui-border-width, 1px) !important; border-block-start-style: solid !important; border-block-start-color: var(--tui-color-border, currentColor) !important` |
| `.tui-border-contrast-high` | `border-color: var(--tui-border-color-contrast-high, var(--tui-typography-color-contrast-high)) !important` |
| `.tui-border-contrast-low` | `border-color: var(--tui-border-color-contrast-low, var(--tui-typography-color-contrast-low)) !important` |
| `.tui-border-danger` | `border-color: var(--tui-theme-danger-border, var(--tui-theme-danger-base)) !important` |
| `.tui-border-info` | `border-color: var(--tui-theme-info-border, var(--tui-theme-info-base)) !important` |
| `.tui-border-inline` | `border-inline-width: var(--tui-border-width, 1px) !important; border-inline-style: solid !important; border-inline-color: var(--tui-color-border, currentColor) !important` |
| `.tui-border-inline-end` | `border-inline-end-width: var(--tui-border-width, 1px) !important; border-inline-end-style: solid !important; border-inline-end-color: var(--tui-color-border, currentColor) !important` |
| `.tui-border-inline-start` | `border-inline-start-width: var(--tui-border-width, 1px) !important; border-inline-start-style: solid !important; border-inline-start-color: var(--tui-color-border, currentColor) !important` |
| `.tui-border-primary` | `border-color: var(--tui-theme-primary-border, var(--tui-theme-primary-base)) !important` |
| `.tui-border-secondary` | `border-color: var(--tui-theme-secondary-border, var(--tui-theme-secondary-base)) !important` |
| `.tui-border-success` | `border-color: var(--tui-theme-success-border, var(--tui-theme-success-base)) !important` |
| `.tui-border-warning` | `border-color: var(--tui-theme-warning-border, var(--tui-theme-warning-base)) !important` |
| `.tui-col-span-1` | `grid-column: span 1/span 1` |
| `.tui-col-span-10` | `grid-column: span 10/span 10` |
| `.tui-col-span-11` | `grid-column: span 11/span 11` |
| `.tui-col-span-12` | `grid-column: span 12/span 12` |
| `.tui-col-span-2` | `grid-column: span 2/span 2` |
| `.tui-col-span-3` | `grid-column: span 3/span 3` |
| `.tui-col-span-4` | `grid-column: span 4/span 4` |
| `.tui-col-span-5` | `grid-column: span 5/span 5` |
| `.tui-col-span-6` | `grid-column: span 6/span 6` |
| `.tui-col-span-7` | `grid-column: span 7/span 7` |
| `.tui-col-span-8` | `grid-column: span 8/span 8` |
| `.tui-col-span-9` | `grid-column: span 9/span 9` |
| `.tui-col-span-full` | `grid-column: 1/-1` |
| `.tui-container` | `container-name: var(--tui-container-name, tuiContainer) !important; container-type: inline-size !important` |
| `.tui-container--size` | `container-name: var(--tui-container-name, tuiContainer) !important; container-type: size !important` |
| `.tui-flex` | `display: flex !important; row-gap: var(--tui-gap-block); column-gap: var(--tui-gap-inline)` |
| `.tui-flex > *` | `min-width: 0` |
| `.tui-flex.is-nowrap` | `flex-wrap: nowrap !important` |
| `.tui-flex.is-wrap` | `flex-wrap: wrap !important` |
| `.tui-font-mono, .tui-font-mono` | `font-family: var(--tui-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace)` |
| `.tui-font-sans, .tui-font-sans` | `font-family: var(--tui-font-family-sans, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)` |
| `.tui-grid` | `display: grid !important; grid-template-columns: repeat(var(--tui-grid-cols, 1), minmax(0, 1fr)); column-gap: var(--tui-gap-inline); row-gap: var(--tui-gap-block)` |
| `.tui-grid--auto` | `grid-template-columns: repeat(auto-fit, minmax(var(--tui-grid-min, 12rem), 1fr))` |
| `.tui-grid--cols-1` | `--tui-grid-cols: 1` |
| `.tui-grid--cols-10` | `--tui-grid-cols: 10` |
| `.tui-grid--cols-11` | `--tui-grid-cols: 11` |
| `.tui-grid--cols-12` | `--tui-grid-cols: 12` |
| `.tui-grid--cols-2` | `--tui-grid-cols: 2` |
| `.tui-grid--cols-3` | `--tui-grid-cols: 3` |
| `.tui-grid--cols-4` | `--tui-grid-cols: 4` |
| `.tui-grid--cols-5` | `--tui-grid-cols: 5` |
| `.tui-grid--cols-6` | `--tui-grid-cols: 6` |
| `.tui-grid--cols-7` | `--tui-grid-cols: 7` |
| `.tui-grid--cols-8` | `--tui-grid-cols: 8` |
| `.tui-grid--cols-9` | `--tui-grid-cols: 9` |
| `.tui-grid, .tui-flex, .tui-stack, .tui-inline-flex` | `--tui-gap-inline: var(--tui-spacing-md); --tui-gap-block: var(--tui-spacing-md)` |
| `.tui-hidden` | `display: none !important` |
| `.tui-inline-flex` | `display: inline-flex !important; row-gap: var(--tui-gap-block); column-gap: var(--tui-gap-inline)` |
| `.tui-input-reset::-ms-reveal, .tui-input-reset input::-ms-reveal` | `display: none !important` |
| `.tui-input-reset::-webkit-calendar-picker-indicator, .tui-input-reset input::-webkit-calendar-picker-indicator` | `display: none !important; -webkit-appearance: none !important` |
| `.tui-input-reset::-webkit-color-swatch-wrapper, .tui-input-reset input::-webkit-color-swatch-wrapper` | `padding: 0 !important` |
| `.tui-input-reset::-webkit-color-swatch, .tui-input-reset input::-webkit-color-swatch` | `border: none !important` |
| `.tui-input-reset::-webkit-inner-spin-button, .tui-input-reset::-webkit-outer-spin-button, .tui-input-reset input::-webkit-inner-spin-button, .tui-input-reset input::-webkit-outer-spin-button` | `-webkit-appearance: none !important; margin: 0 !important` |
| `.tui-input-reset::-webkit-search-decoration, .tui-input-reset::-webkit-search-cancel-button, .tui-input-reset::-webkit-search-results-button, .tui-input-reset::-webkit-search-results-decoration, .tui-input-reset input::-webkit-search-decoration, .tui-input-reset input::-webkit-search-cancel-button, .tui-input-reset input::-webkit-search-results-button, .tui-input-reset input::-webkit-search-results-decoration` | `display: none !important; -webkit-appearance: none !important` |
| `.tui-input-reset[type=number], .tui-input-reset input[type=number]` | `-moz-appearance: textfield !important` |
| `.tui-list-reset` | `list-style: none !important; padding: 0 !important; margin: 0 !important` |
| `.tui-list-reset > li` | `list-style: none !important` |
| `.tui-margin-auto` | `margin: auto !important` |
| `.tui-margin-block-auto` | `margin-block: auto !important` |
| `.tui-margin-block-end-auto` | `margin-block-end: auto !important` |
| `.tui-margin-block-end-lg` | `margin-block-end: var(--tui-spacing-lg) !important` |
| `.tui-margin-block-end-md` | `margin-block-end: var(--tui-spacing-md) !important` |
| `.tui-margin-block-end-none` | `margin-block-end: 0 !important` |
| `.tui-margin-block-end-sm` | `margin-block-end: var(--tui-spacing-sm) !important` |
| `.tui-margin-block-end-xl` | `margin-block-end: var(--tui-spacing-xl) !important` |
| `.tui-margin-block-end-xs` | `margin-block-end: var(--tui-spacing-xs) !important` |
| `.tui-margin-block-end-xxl` | `margin-block-end: var(--tui-spacing-xxl) !important` |
| `.tui-margin-block-end-xxs` | `margin-block-end: var(--tui-spacing-xxs) !important` |
| `.tui-margin-block-lg` | `margin-block: var(--tui-spacing-lg) !important` |
| `.tui-margin-block-md` | `margin-block: var(--tui-spacing-md) !important` |
| `.tui-margin-block-none` | `margin-block: 0 !important` |
| `.tui-margin-block-sm` | `margin-block: var(--tui-spacing-sm) !important` |
| `.tui-margin-block-start-auto` | `margin-block-start: auto !important` |
| `.tui-margin-block-start-lg` | `margin-block-start: var(--tui-spacing-lg) !important` |
| `.tui-margin-block-start-md` | `margin-block-start: var(--tui-spacing-md) !important` |
| `.tui-margin-block-start-none` | `margin-block-start: 0 !important` |
| `.tui-margin-block-start-sm` | `margin-block-start: var(--tui-spacing-sm) !important` |
| `.tui-margin-block-start-xl` | `margin-block-start: var(--tui-spacing-xl) !important` |
| `.tui-margin-block-start-xs` | `margin-block-start: var(--tui-spacing-xs) !important` |
| `.tui-margin-block-start-xxl` | `margin-block-start: var(--tui-spacing-xxl) !important` |
| `.tui-margin-block-start-xxs` | `margin-block-start: var(--tui-spacing-xxs) !important` |
| `.tui-margin-block-xl` | `margin-block: var(--tui-spacing-xl) !important` |
| `.tui-margin-block-xs` | `margin-block: var(--tui-spacing-xs) !important` |
| `.tui-margin-block-xxl` | `margin-block: var(--tui-spacing-xxl) !important` |
| `.tui-margin-block-xxs` | `margin-block: var(--tui-spacing-xxs) !important` |
| `.tui-margin-inline-auto` | `margin-inline: auto !important` |
| `.tui-margin-inline-end-auto` | `margin-inline-end: auto !important` |
| `.tui-margin-inline-end-lg` | `margin-inline-end: var(--tui-spacing-lg) !important` |
| `.tui-margin-inline-end-md` | `margin-inline-end: var(--tui-spacing-md) !important` |
| `.tui-margin-inline-end-none` | `margin-inline-end: 0 !important` |
| `.tui-margin-inline-end-sm` | `margin-inline-end: var(--tui-spacing-sm) !important` |
| `.tui-margin-inline-end-xl` | `margin-inline-end: var(--tui-spacing-xl) !important` |
| `.tui-margin-inline-end-xs` | `margin-inline-end: var(--tui-spacing-xs) !important` |
| `.tui-margin-inline-end-xxl` | `margin-inline-end: var(--tui-spacing-xxl) !important` |
| `.tui-margin-inline-end-xxs` | `margin-inline-end: var(--tui-spacing-xxs) !important` |
| `.tui-margin-inline-lg` | `margin-inline: var(--tui-spacing-lg) !important` |
| `.tui-margin-inline-md` | `margin-inline: var(--tui-spacing-md) !important` |
| `.tui-margin-inline-none` | `margin-inline: 0 !important` |
| `.tui-margin-inline-sm` | `margin-inline: var(--tui-spacing-sm) !important` |
| `.tui-margin-inline-start-auto` | `margin-inline-start: auto !important` |
| `.tui-margin-inline-start-lg` | `margin-inline-start: var(--tui-spacing-lg) !important` |
| `.tui-margin-inline-start-md` | `margin-inline-start: var(--tui-spacing-md) !important` |
| `.tui-margin-inline-start-none` | `margin-inline-start: 0 !important` |
| `.tui-margin-inline-start-sm` | `margin-inline-start: var(--tui-spacing-sm) !important` |
| `.tui-margin-inline-start-xl` | `margin-inline-start: var(--tui-spacing-xl) !important` |
| `.tui-margin-inline-start-xs` | `margin-inline-start: var(--tui-spacing-xs) !important` |
| `.tui-margin-inline-start-xxl` | `margin-inline-start: var(--tui-spacing-xxl) !important` |
| `.tui-margin-inline-start-xxs` | `margin-inline-start: var(--tui-spacing-xxs) !important` |
| `.tui-margin-inline-xl` | `margin-inline: var(--tui-spacing-xl) !important` |
| `.tui-margin-inline-xs` | `margin-inline: var(--tui-spacing-xs) !important` |
| `.tui-margin-inline-xxl` | `margin-inline: var(--tui-spacing-xxl) !important` |
| `.tui-margin-inline-xxs` | `margin-inline: var(--tui-spacing-xxs) !important` |
| `.tui-margin-lg` | `margin: var(--tui-spacing-lg) !important` |
| `.tui-margin-md` | `margin: var(--tui-spacing-md) !important` |
| `.tui-margin-none` | `margin: 0 !important` |
| `.tui-margin-sm` | `margin: var(--tui-spacing-sm) !important` |
| `.tui-margin-xl` | `margin: var(--tui-spacing-xl) !important` |
| `.tui-margin-xs` | `margin: var(--tui-spacing-xs) !important` |
| `.tui-margin-xxl` | `margin: var(--tui-spacing-xxl) !important` |
| `.tui-margin-xxs` | `margin: var(--tui-spacing-xxs) !important` |
| `.tui-padding-block-end-lg` | `padding-block-end: var(--tui-spacing-lg) !important` |
| `.tui-padding-block-end-md` | `padding-block-end: var(--tui-spacing-md) !important` |
| `.tui-padding-block-end-none` | `padding-block-end: 0 !important` |
| `.tui-padding-block-end-sm` | `padding-block-end: var(--tui-spacing-sm) !important` |
| `.tui-padding-block-end-xl` | `padding-block-end: var(--tui-spacing-xl) !important` |
| `.tui-padding-block-end-xs` | `padding-block-end: var(--tui-spacing-xs) !important` |
| `.tui-padding-block-end-xxl` | `padding-block-end: var(--tui-spacing-xxl) !important` |
| `.tui-padding-block-end-xxs` | `padding-block-end: var(--tui-spacing-xxs) !important` |
| `.tui-padding-block-lg` | `padding-block: var(--tui-spacing-lg) !important` |
| `.tui-padding-block-md` | `padding-block: var(--tui-spacing-md) !important` |
| `.tui-padding-block-none` | `padding-block: 0 !important` |
| `.tui-padding-block-sm` | `padding-block: var(--tui-spacing-sm) !important` |
| `.tui-padding-block-start-lg` | `padding-block-start: var(--tui-spacing-lg) !important` |
| `.tui-padding-block-start-md` | `padding-block-start: var(--tui-spacing-md) !important` |
| `.tui-padding-block-start-none` | `padding-block-start: 0 !important` |
| `.tui-padding-block-start-sm` | `padding-block-start: var(--tui-spacing-sm) !important` |
| `.tui-padding-block-start-xl` | `padding-block-start: var(--tui-spacing-xl) !important` |
| `.tui-padding-block-start-xs` | `padding-block-start: var(--tui-spacing-xs) !important` |
| `.tui-padding-block-start-xxl` | `padding-block-start: var(--tui-spacing-xxl) !important` |
| `.tui-padding-block-start-xxs` | `padding-block-start: var(--tui-spacing-xxs) !important` |
| `.tui-padding-block-xl` | `padding-block: var(--tui-spacing-xl) !important` |
| `.tui-padding-block-xs` | `padding-block: var(--tui-spacing-xs) !important` |
| `.tui-padding-block-xxl` | `padding-block: var(--tui-spacing-xxl) !important` |
| `.tui-padding-block-xxs` | `padding-block: var(--tui-spacing-xxs) !important` |
| `.tui-padding-inline-end-lg` | `padding-inline-end: var(--tui-spacing-lg) !important` |
| `.tui-padding-inline-end-md` | `padding-inline-end: var(--tui-spacing-md) !important` |
| `.tui-padding-inline-end-none` | `padding-inline-end: 0 !important` |
| `.tui-padding-inline-end-sm` | `padding-inline-end: var(--tui-spacing-sm) !important` |
| `.tui-padding-inline-end-xl` | `padding-inline-end: var(--tui-spacing-xl) !important` |
| `.tui-padding-inline-end-xs` | `padding-inline-end: var(--tui-spacing-xs) !important` |
| `.tui-padding-inline-end-xxl` | `padding-inline-end: var(--tui-spacing-xxl) !important` |
| `.tui-padding-inline-end-xxs` | `padding-inline-end: var(--tui-spacing-xxs) !important` |
| `.tui-padding-inline-lg` | `padding-inline: var(--tui-spacing-lg) !important` |
| `.tui-padding-inline-md` | `padding-inline: var(--tui-spacing-md) !important` |
| `.tui-padding-inline-none` | `padding-inline: 0 !important` |
| `.tui-padding-inline-sm` | `padding-inline: var(--tui-spacing-sm) !important` |
| `.tui-padding-inline-start-lg` | `padding-inline-start: var(--tui-spacing-lg) !important` |
| `.tui-padding-inline-start-md` | `padding-inline-start: var(--tui-spacing-md) !important` |
| `.tui-padding-inline-start-none` | `padding-inline-start: 0 !important` |
| `.tui-padding-inline-start-sm` | `padding-inline-start: var(--tui-spacing-sm) !important` |
| `.tui-padding-inline-start-xl` | `padding-inline-start: var(--tui-spacing-xl) !important` |
| `.tui-padding-inline-start-xs` | `padding-inline-start: var(--tui-spacing-xs) !important` |
| `.tui-padding-inline-start-xxl` | `padding-inline-start: var(--tui-spacing-xxl) !important` |
| `.tui-padding-inline-start-xxs` | `padding-inline-start: var(--tui-spacing-xxs) !important` |
| `.tui-padding-inline-xl` | `padding-inline: var(--tui-spacing-xl) !important` |
| `.tui-padding-inline-xs` | `padding-inline: var(--tui-spacing-xs) !important` |
| `.tui-padding-inline-xxl` | `padding-inline: var(--tui-spacing-xxl) !important` |
| `.tui-padding-inline-xxs` | `padding-inline: var(--tui-spacing-xxs) !important` |
| `.tui-padding-lg` | `padding: var(--tui-spacing-lg) !important` |
| `.tui-padding-md` | `padding: var(--tui-spacing-md) !important` |
| `.tui-padding-none` | `padding: 0 !important` |
| `.tui-padding-sm` | `padding: var(--tui-spacing-sm) !important` |
| `.tui-padding-xl` | `padding: var(--tui-spacing-xl) !important` |
| `.tui-padding-xs` | `padding: var(--tui-spacing-xs) !important` |
| `.tui-padding-xxl` | `padding: var(--tui-spacing-xxl) !important` |
| `.tui-padding-xxs` | `padding: var(--tui-spacing-xxs) !important` |
| `.tui-position-absolute` | `position: absolute !important` |
| `.tui-position-relative` | `position: relative !important` |
| `.tui-position-static` | `position: static !important` |
| `.tui-rounded-full` | `border-radius: 9999px !important` |
| `.tui-rounded-lg` | `border-radius: var(--tui-radius-lg) !important` |
| `.tui-rounded-md` | `border-radius: var(--tui-radius-md) !important` |
| `.tui-rounded-none` | `border-radius: 0 !important` |
| `.tui-rounded-sm` | `border-radius: var(--tui-radius-sm) !important` |
| `.tui-rounded-xl` | `border-radius: var(--tui-radius-xl) !important` |
| `.tui-rounded-xs` | `border-radius: var(--tui-radius-xs) !important` |
| `.tui-row-span-1` | `grid-row: span 1/span 1` |
| `.tui-row-span-10` | `grid-row: span 10/span 10` |
| `.tui-row-span-11` | `grid-row: span 11/span 11` |
| `.tui-row-span-12` | `grid-row: span 12/span 12` |
| `.tui-row-span-2` | `grid-row: span 2/span 2` |
| `.tui-row-span-3` | `grid-row: span 3/span 3` |
| `.tui-row-span-4` | `grid-row: span 4/span 4` |
| `.tui-row-span-5` | `grid-row: span 5/span 5` |
| `.tui-row-span-6` | `grid-row: span 6/span 6` |
| `.tui-row-span-7` | `grid-row: span 7/span 7` |
| `.tui-row-span-8` | `grid-row: span 8/span 8` |
| `.tui-row-span-9` | `grid-row: span 9/span 9` |
| `.tui-row-span-full` | `grid-row: 1/-1` |
| `.tui-stack` | `display: flex !important; flex-direction: column; row-gap: var(--tui-gap-block)` |
| `.tui-stack > *` | `min-height: 0` |
| `.tui-stretched-link-container` | `position: relative !important` |
| `.tui-stretched-link::after` | `content: "" !important; position: absolute !important; inset: 0 !important` |
| `.tui-text-bold` | `font-weight: var(--tui-typography-weight-bold, 700) !important` |
| `.tui-text-contrast-high` | `color: var(--tui-typography-color-contrast-high)` |
| `.tui-text-contrast-low` | `color: var(--tui-typography-color-contrast-low)` |
| `.tui-text-danger` | `color: var(--tui-theme-danger-base) !important` |
| `.tui-text-info` | `color: var(--tui-theme-info-base) !important` |
| `.tui-text-lg` | `font-size: var(--tui-typography-size-lg) !important` |
| `.tui-text-md` | `font-size: var(--tui-typography-size-md) !important` |
| `.tui-text-normal` | `font-weight: var(--tui-typography-weight-normal, 400) !important` |
| `.tui-text-primary` | `color: var(--tui-theme-primary-base) !important` |
| `.tui-text-secondary` | `color: var(--tui-theme-secondary-base) !important` |
| `.tui-text-sm` | `font-size: var(--tui-typography-size-sm) !important` |
| `.tui-text-success` | `color: var(--tui-theme-success-base) !important` |
| `.tui-text-warning` | `color: var(--tui-theme-warning-base) !important` |
| `.tui-text-white` | `color: var(--tui-palette-color-white)` |
| `.tui-text-xl` | `font-size: var(--tui-typography-size-xl) !important` |
| `.tui-text-xs` | `font-size: var(--tui-typography-size-xs) !important` |
| `.tui-text-xxl` | `font-size: var(--tui-typography-size-xxl) !important` |
| `.tui-text-xxs` | `font-size: var(--tui-typography-size-xxs) !important` |
| `.tui-visually-hidden, .tui-visually-hidden--focusable:not(:focus):not(:focus-within):not(:active)` | `position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; white-space: nowrap !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; border: 0 !important` |
| `ul.tui-grid > li, ul.tui-stack > li, ul.tui-inline-flex > li, ul.tui-flex > li` | `list-style: none !important` |
| `ul.tui-grid, ul.tui-stack, ul.tui-inline-flex, ul.tui-flex` | `list-style: none !important; padding-inline-start: 0 !important` |

## In practice

Utilities apply to any element, component roots included — a component's
`className` lands on its outer wrapper. Use them for the *layout* layer
(spacing, positioning), not theming (that's tokens, above). Here
`tui-margin-block-end-lg` spaces the field from what follows:

```jsx
<div className="tui-interface" style={{ maxWidth: "22rem" }}>
  <SearchInput className="tui-margin-block-end-lg" defaultValue="Foundations" aria-label="Search courses" />
  <p className="tui-margin-none">Next block — pushed down by the field's utility margin.</p>
</div>
```

Live example: [interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/reference-utility-classes--docs).

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/reference-utility-classes--docs