Utilities
12 files of classes that are not components. They live in @layer ui.utilities, the last layer, so a utility beats a component's own rule — which is the point of the ones that exist, and the reason there are only 12 of them.
- a11yAccessibility utilities.
.sr-only - caption.caption — the fifth typographic role: one line of small, quieted text.
.caption - center.center — the column a page is read in, and the gutter beside it.
.center - cluster.cluster — a row of things that goes to a second line instead of off the page.
.cluster - grid.grid — as many equal columns as fit, and never fewer than one.
.grid - icon.icon — the consumer-facing surface for the sprite.
.icon - link.link — a text link outside
.prose..link - prose.prose — styling for content you do not control.
.prose - splitSplit — a main column and a companion beside it, until there is no room.
.split - stack.stack — the space between things, owned by the thing that contains them.
.stack - title.page-title, .page-lede, .section-title, .subsection-title — the outline of a page, as four classes rather than as nine copies of the same four rules.
.page-lede - truncate.truncate — clamping text to one line, or to N lines, with an ellipsis.
.truncate
Why there are only five
A utility here is a class that does one thing the cascade cannot express any other way — hiding text from eyes but not from a screen reader, clamping a line, styling markup you did not write. It is not a spelling of a CSS declaration. There is no .flex, no .p-4, no .text-sm, and adding them would make this library a worse version of one that already exists.
The last layer is the reason each of these is a utility rather than a component: it has to win against a component's own rule, and cascade order is how it does that without !important.