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.
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:
<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.