Display and sizing

Display

.contents is the interesting one. It removes the element's own box while keeping its children in the parent's layout, which is how you get a server-rendered wrapper out of the way of a grid without changing the HTML. It also removes the box from the accessibility tree in some engines, so do not put it on anything with a role or a label.

Flex direction and alignment

.grow sets flex: 1 1 auto and min-inline-size: 0 together. The second half is the fix for the commonest flex bug there is: a flex item will not shrink below its content, so a long unbroken string in a .grow item pushes the row wider than its container and the whole page picks up a horizontal scrollbar.

Size

All of these are logical: .w-full sets inline-size and .h-full sets block-size, so they follow the writing mode rather than the screen. .min-h-screen uses dvh rather than vh, which is what stops a full-height layout from being cropped by the address bar on a phone.

.min-is-0 is .grow's second half on its own, for grid items — a grid track's minimum is auto too, so a wide table inside one drags the whole track past the viewport unless the item is allowed to shrink.

Aspect ratio

Three ratios with object-fit: cover already set, for the media slot in a card or a gallery. Setting the ratio in CSS rather than leaving the image to size itself is what stops the page reflowing as images arrive.

Overflow

.overflow-clip and .overflow-hidden both cut the content off; the difference is that hidden makes the element a scroll container and clip does not. That matters more than it sounds: overflow: hidden on an ancestor is what breaks position: sticky, and swapping it for clip usually fixes a sticky header that mysteriously does not stick.

Visibility and input

.hidden removes an element from the page and from assistive technology. .sr-only does the opposite: it keeps the element in the accessibility tree and takes it off the screen, which is how you label an icon-only control. They are not interchangeable, and using .hidden for a label is how a button ends up announced as "button".

.touch-only and .mouse-only key off pointer: coarse and pointer: fine rather than width, so a touchscreen laptop is treated by what it has rather than by how wide it is. Neither is a substitute for making a control work with both.

Breakpoint prefixes

Deck has three viewport breakpoints — 40rem, 48rem and 64rem — and a small set of prefixed classes that turn on at each. They are mobile-first: the prefixed class applies at that width and above, so the unprefixed state is the phone.

<div class="stack stack-3 md:row md:items-center">
  <img class="ratio-1x1" src="…" alt="">
  <p>Stacked on a phone, side by side from 48rem up.</p>
</div>

The available combinations are fixed rather than generated, so this is not a system where any class can take any prefix. The rows below list what exists at each breakpoint, taken from the source.

The three rows below are named .sm, .md and .lg because that is how they land in the generated inventory: the extractor reads a class name up to the first character that cannot be in one, and in sm\:hidden that is the backslash escaping the colon. The classes you write are the full prefixed names. Recorded so the table is not silently wrong about it.

Container queries

A viewport breakpoint asks how wide the window is. A container query asks how wide the element's own column is, which is nearly always the question you actually meant: the same card should stack in a sidebar and spread out in a main column, and the window has no opinion about which of those it is in.

.cq marks an element as a container. The named variants exist so a deeply nested component can query a specific ancestor instead of the closest one — without a name, @container always resolves to the nearest container, which is rarely the one you meant once containers nest.

Container breakpoint prefixes

The same idea as md:, keyed to the container at 24rem, 32rem and 44rem. These only do anything inside an element carrying .cq, and the same extractor caveat applies to their names.

Container-driven patterns

Five ready-made ones. .metarow is a list row that reveals metadata as space allows: .row-meta appears at 26rem of container width and .row-meta-wide at 38rem, so the same row is terse in a narrow pane and complete in a wide one with no JavaScript measuring anything.

Mirroring

Deck is written in logical properties, so a right-to-left page mirrors on its own. These two are for the exceptions. .mirror-rtl flips an element horizontally when the direction is RTL — for a directional glyph in an icon set that does not have a mirrored variant. .no-flip pins something that would otherwise be flipped by a rule higher up: a logo, a play button, a chart axis.

Containment

Six classes that tell the engine it may skip work. .defer sets content-visibility: auto, so an offscreen section is not laid out or painted until it approaches the viewport; .virtual applies the same idea per child, which is what makes a very long list scroll smoothly with no virtualisation library.

The catch with .defer is that skipped content is skipped by in-page find as well in some engines, and the contain-intrinsic-size estimate is what keeps the scrollbar from jumping as sections resolve. Keep the estimate close to the real height.

When not to use these

• Not to rebuild a primitive. .flex .flex-col .gap-4 is .stack written out. .flex .wrap .items-center .gap-3 is .cluster. Use the name; it is one class and it carries the default.
• Not .hidden for a visual-only hide. It takes the element out of the accessibility tree too. If it should be read but not seen, that is .sr-only.
• Not a breakpoint prefix where a container query fits. A component that reflows on window width is wrong the moment somebody puts it in a sidebar. .cq plus cq-md: asks the right question.
• Not .cursor-pointer on a <div> to make it a button. The cursor is the least of what a button is. Use a <button> and get the focus ring, the keyboard activation and the role for free.
• Not .defer on everything. It costs a layout pass when the element comes into view. On short content it is slower than doing nothing.