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.

Modifier --unit --unit-size sm 3px 12px md 4px 16px lg 5px 18px

Display

Control the display type or flex ratio of any element.

Modifier Effect hide display: none flex display: flex block display: block f-0..8 flex: 0..8 justify-between justify-content: space-between

Sizing

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.

Modifier Effect 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.

Modifier Property g-0..8 gap

Spacing

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

Prefix Property m-0..8 margin (all sides) mt-0..8 margin-top mb-0..8 margin-bottom ml-0..8 margin-left mr-0..8 margin-right mx-0..8 margin-inline (left + right) my-0..8 margin-block (top + bottom) p-0..8 padding (all sides) pt-0..8 padding-top pb-0..8 padding-bottom pl-0..8 padding-left pr-0..8 padding-right px-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.

Modifier Property sticky position: sticky t-0..8 top r-0..8 right b-0..8 bottom l-0..8 left order-first order: -1

Color

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

Modifier Preview text-blue Aa text-purple Aa text-green Aa text-orange Aa text-cyan Aa text-red Aa text-yellow Aa text-slate Aa Modifier Preview bg-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.

Prefix Breakpoint Available modifiers sm: ≤ 768px sm, md, lg, hide, flex, block, vertical md: 769px – 1024px sm, md, lg, hide, flex, block, vertical lg: > 1024px sm, md, lg, hide, flex, block, vertical
 Modifiers
Stylecheat Stylecheat Introduction Context Elements Modifiers
LoginCarousel
Download