Modifiers are plain HTML attributes. We call them modifiers because that is exactly what they do — modify the default appearance or state of an element.

Under the hood they are CSS attribute selectors: [sm], [g-4], [text-red]. Drop an attribute on any element and the style applies immediately. Prefer classes? Every modifier is also available as a class — .sm, .g-4, .text-red.

Modifiers compose without conflict. Each one owns a single property, so stacking sm g-2 text-red on the same element is perfectly safe — order never matters and nothing overrides anything else.

Scale

The three scale modifiers set --unit and --unit-size together. sm is two thirds of the default and lg four thirds. Everything built with calc(var(--unit) * N) scales in step — spacing, font size, line height, border-radius, gap.

Buttons, text inputs and dropdowns — and a <label> wrapping one — keep their text size under sm. Only --unit changes, so they get shorter while the text stays readable.

Display

Control the display type or flex ratio of any element.

Surface

Strip an element's surface or make it react to the pointer. hover lays a faint foreground tint over whatever background the element already has. The typed hover="…" form swaps in a background color of your own instead.

Sizing

Set width or height to full, auto or a size in units, and cap width with max-w-*. Sizes run 0–8, then 10, 12, 16, 18, 20, 24, 32, 36, 40, 48, 60, 64, 72, 96, 128 and 160. The typed w and h attributes take any value — experimental, Chrome 133+ only for now.

Gap

Gap between flex or grid children. Scales with --unit.

Spacing

Margin and padding utilities follow a consistent naming pattern. All values scale with --unit, so they respond to sm, md, and lg automatically.

Position

Position and inset utilities for positioned elements. Inset values scale with --unit.

Color

Text and background color utilities built on CSS custom properties. Background tints use 20% opacity so they work on any surface without clashing.

Responsive

Prefix a scale, display, sizing, gap or spacing modifier with sm:, md:, or lg: to apply it only at a specific breakpoint — p-8 sm:p-4, w-96 sm:w-full. Carousels switch axis on phones with sm:x, sm:y and sm:z.

Transform

Rotate any element by a number of degrees. Built on the rotate property, so it composes with transform-based animations instead of overriding them. Typed attribute — Chrome 133+ for now.

Animations

A small set of functional animations. Each one has a clear semantic role — loading, attention, error, or content placeholder. Drop the modifier on any element; pair with <icon> for inline indicators.

Transitions

Two-state transitions driven by the [toggled] attribute. Add the modifier to arm the transition (in-variants start hidden, out-variants and flips start in their resting state); add [toggled] to play to the other state, remove it to reverse. animate-y also flips on its own when its parent's next sibling carries [open], which is how an accordion chevron turns.