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.
Everything built with calc(var(--unit) * N) scales in step — spacing, font size, border-radius,
gap.
sm 3px 12pxmd 4px 16pxlg 5px 18pxDisplay
Control the display type or flex ratio of any element.
hide display: noneflex display: flexblock display: blockinline-block display: inline-blockf-0..8 flex: 0..8justify-between justify-content: space-betweenSizing
Set width or height to full, or use the typed attribute syntax for unit-based sizes. The w and h attributes are experimental — Chrome 133+ only for now.
w-full width: 100%h-full height: 100%mw-full min-width: 100%mh-full min-height: 100%w="N" width: N × --unit (experimental)h="N" height: N × --unit (experimental)Gap
Gap between flex or grid children. Scales with --unit.
g-0..8 gapSpacing
Margin and padding utilities follow a consistent naming pattern. All values scale with --unit, so they respond to sm, md, and lg automatically.
m-0..8 margin (all sides)mt-0..8 margin-topmb-0..8 margin-bottomml-0..8 margin-leftmr-0..8 margin-rightmx-0..8 margin-inline (left + right)my-0..8 margin-block (top + bottom)p-0..8 padding (all sides)pt-0..8 padding-toppb-0..8 padding-bottompl-0..8 padding-leftpr-0..8 padding-rightpx-0..8 padding-inline (left + right)py-0..8 padding-block (top + bottom)Position
Position and inset utilities for positioned elements. Inset values scale with --unit.
position="…" static / relative / absolute / fixed / stickycontain="…" none / strict / content / size / inline-size / layout / style / paintt-0..8 topr-0..8 rightb-0..8 bottoml-0..8 leftorder-first order: -1Color
Text and background color utilities built on CSS custom properties. Background tints use 20% opacity so they work on any surface without clashing.
text-blue Aatext-purple Aatext-green Aatext-orange Aatext-cyan Aatext-red Aatext-yellow Aatext-slate Aabg-blue bg-purple bg-green bg-orange bg-cyan bg-red bg-yellow bg-slate Responsive
Prefix any scale or display modifier with sm:, md:, or lg: to apply it only at a specific breakpoint.
sm: ≤ 768px sm, md, lg, hide, flex, block, verticalmd: 769px – 1024px sm, md, lg, hide, flex, block, verticallg: > 1024px sm, md, lg, hide, flex, block, verticalTransform
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.
rotate="N" rotate: N degrees (experimental)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.
animate-spin Loading, processing animate-pulse Alive, loading dot animate-ping Notification ring animate-bounce Bouncing attention animate-shake Error feedback animate-shimmer Skeleton placeholder 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-fade-in Fade content in animate-fade-out Fade content out animate-slide-in-left Slide in from left animate-slide-in-right Slide in from right animate-slide-in-up Slide in from above animate-slide-in-down Slide in from below animate-bounce-in Bounce in animate-bounce-out Bounce out animate-x Flip horizontally (rotateY 180°) animate-y Flip vertically (rotateX 180°) 
Stylecheat