API

Switches

Fixed rule sets with no value, carried as data-ui tokens.

A switch is the smallest kind of primitive: a fixed rule set with no slots, no tag form, no presets, and no value. It rides the same data-ui token list as everything else, so it stacks on a primitive (data-ui="badge sr-only") or stands alone on a plain element.

Switches
Token	Effect
`data-ui="sr-only"`	visually hidden, still in the accessibility tree
`data-ui="pile"`	every child in one grid area
`data-ui="isolate"`	a new stacking context (isolation: isolate)
`data-ui="not-prose"`	a prose ancestor stops styling this subtree (a widget inside an article; rules in _typography.css)
`data-ui="truncate"`	one line, overflow cut with an ellipsis (`--line-clamp` clamps to more lines)
`data-ui="spin"`	a full turn every second (loading indicators)
`data-ui="ping"`	scale up and fade out every second, like a radar ping (notification dots)
`data-ui="pulse"`	fade to half opacity and back every two seconds (skeleton loaders)
`data-ui="bounce"`	drop and rise every second (scroll hints)
`data-ui="divide-x"` `data-ui="divide-y"`	a border between direct children, sized and colored by the container's `--divide` (default 1px --color-border)
`data-ui="container"`	an inline-size query container, so breakpoint tiers inside it (`--grid-cols--md`) follow its width, not the page's
`data-ui="theme-dark"` `data-ui="theme-light"`	pins the color scheme for the subtree (usually on <html>); without either, the system setting applies (rules in _variables.css, so they rank with the theme tokens)

Pile

pile stacks every child in one grid cell, like layering with position: absolute but without taking anything out of flow. Pair it with isolate for a layered hero so the stacking context stays local: data-ui="pile isolate".

PreviewHTML

grid-area-pile stacked layer

<div
  data-ui="pile"
  style="
    --display: grid;
    --w: 100%;
    --h: 6;
    --max-w: 96;
  "
>
  <div
    style="
      --size: 100%;
      --bg: var(--color-muted);
      --rounded: var(--radius-lg);
    "
  ></div>
  <span data-ui="badge" data-badge-variant="primary">grid-area-pile</span>
  <span
    data-ui="badge"
    data-badge-variant="muted"
    style="
      --self: start;
      --mt: 4;
      --ml: auto;
      --mr: 4;
    "
    >stacked layer</span
  >
</div>

Truncate

truncate keeps text on one line and ends the overflow with an ellipsis. It needs a width to overflow: a block element, a sized one (--w: 48), or a flex item with --min-w: 0, since a flex item can't shrink below its content otherwise. To clamp to more than one line, use the --line-clamp utility instead.

<p data-ui="truncate">A file name far too long for its column.pdf</p>

Animations

spin, ping, pulse, and bounce are Tailwind's looping animations: a spinner, a ping that scales out and fades (put it on a copy stacked behind a notification dot), a skeleton loader's slow fade, and a bounce for a scroll hint. They run on the kit's transition easing (--default-transition-timing-function) and stop when the visitor prefers reduced motion. They animate transform, so --rotate, --scale, and --translate still apply on top.

<svg data-ui="spin" aria-hidden="true">…</svg>
<span data-ui="pile">
  <i
    data-ui="ping"
    style="
      --size: 2;
      --bg: var(--color-primary);
      --rounded: var(--radius-full);
    "
  ></i>
  <i
    style="
      --size: 2;
      --bg: var(--color-primary);
      --rounded: var(--radius-full);
    "
  ></i>
</span>

Dividers

divide-x and divide-y draw a border between direct children. The container's --divide sizes or colors it with the border grammar: a number is pixels in --color-border, a color is 1px in that color, a length is the width.

Group and container

group is listed with the group modifier and container with breakpoints; both are switches too.