Cheatsheet

Every registered Atomattr key in one place.

All attributes

The searchable attribute table is generated directly from the registered dictionary and lists every supported styling name with its CSS output. Use it to check the exact spelling before adding a styling attribute.

Attribute	CSS output
`display`	`display`
`block`	`display: block`
`inline-block`	`display: inline-block`
`inline`	`display: inline`
`flex`	`flex`
`inline-flex`	`display: inline-flex`
`grid`	`display: grid`
`inline-grid`	`display: inline-grid`
`table`	`display: table`
`hidden`	`display: none`
`visible`	`visibility: visible`
`invisible`	`visibility: hidden`
`contents`	`display: contents`
`flex-row`	`flex-direction: row`
`flex-col`	`flex-direction: column`
`flex-row-reverse`	`flex-direction: row-reverse`
`flex-col-reverse`	`flex-direction: column-reverse`
`direction`	`flex-direction`
`grow`	`flex-grow`
`shrink`	`flex-shrink`
`basis`	`flex-basis`
`wrap`	`flex-wrap: wrap`
`no-wrap`	`flex-wrap: nowrap`
`wrap-reverse`	`flex-wrap: wrap-reverse`
`order`	`order`
`justify`	`justify-content`
`justify-items`	`justify-items`
`justify-self`	`justify-self`
`items`	`align-items`
`self`	`align-self`
`content`	`align-content`
`place-items`	`place-items`
`place-content`	`place-content`
`place-self`	`place-self`
`center`	`display: flex; align-items: center; justify-content: center`
`grid-cols`	`grid-template-columns`
`grid-rows`	`grid-template-rows`
`grid-template-areas`	`grid-template-areas`
`col-span`	`grid-column`
`row-span`	`grid-row`
`col-start`	`grid-column-start`
`col-end`	`grid-column-end`
`row-start`	`grid-row-start`
`row-end`	`grid-row-end`
`auto-cols`	`grid-auto-columns`
`auto-rows`	`grid-auto-rows`
`auto-flow`	`grid-auto-flow`
`gap`	`gap`
`gap-x`	`column-gap`
`gap-y`	`row-gap`
`p`	`padding`
`pt`	`padding-top`
`pb`	`padding-bottom`
`pl`	`padding-left`
`pr`	`padding-right`
`px`	`padding-left, padding-right`
`py`	`padding-top, padding-bottom`
`ps`	`padding-inline-start`
`pe`	`padding-inline-end`
`padding-inline`	`padding-inline`
`padding-inline-start`	`padding-inline-start`
`padding-inline-end`	`padding-inline-end`
`padding-block`	`padding-block`
`padding-block-start`	`padding-block-start`
`padding-block-end`	`padding-block-end`
`m`	`margin`
`mt`	`margin-top`
`mb`	`margin-bottom`
`ml`	`margin-left`
`mr`	`margin-right`
`mx`	`margin-left, margin-right`
`my`	`margin-top, margin-bottom`
`ms`	`margin-inline-start`
`me`	`margin-inline-end`
`margin-inline`	`margin-inline`
`margin-inline-start`	`margin-inline-start`
`margin-inline-end`	`margin-inline-end`
`margin-block`	`margin-block`
`margin-block-start`	`margin-block-start`
`margin-block-end`	`margin-block-end`
`mx-auto`	`margin-left: auto; margin-right: auto`
`w`	`width`
`h`	`height`
`min-w`	`min-width`
`max-w`	`max-width`
`min-h`	`min-height`
`max-h`	`max-height`
`min-inline-size`	`min-inline-size`
`max-inline-size`	`max-inline-size`
`min-block-size`	`min-block-size`
`max-block-size`	`max-block-size`
`size`	`width, height`
`aspect`	`aspect-ratio`
`position`	`position`
`static`	`position: static`
`relative`	`position: relative`
`absolute`	`position: absolute`
`fixed`	`position: fixed`
`sticky`	`position: sticky`
`top`	`top`
`bottom`	`bottom`
`left`	`left`
`right`	`right`
`inset-inline`	`inset-inline`
`inset-inline-start`	`inset-inline-start`
`inset-inline-end`	`inset-inline-end`
`inset-block`	`inset-block`
`inset-block-start`	`inset-block-start`
`inset-block-end`	`inset-block-end`
`inset`	`top, right, bottom, left`
`inset-x`	`left, right`
`inset-y`	`top, bottom`
`z`	`z-index`
`overflow`	`overflow`
`overflow-x`	`overflow-x`
`overflow-y`	`overflow-y`
`overflow-clip`	`overflow: clip`
`overflow-hidden`	`overflow: hidden`
`overflow-scroll`	`overflow: scroll`
`overflow-auto`	`overflow: auto`
`overscroll`	`overscroll-behavior`
`overscroll-x`	`overscroll-behavior-x`
`overscroll-y`	`overscroll-behavior-y`
`scrollbar-color`	`scrollbar-color`
`scrollbar-width`	`scrollbar-width`
`bg`	`background-color`
`bg-color`	`background-color`
`bg-image`	`background-image`
`bg-size`	`background-size`
`bg-position`	`background-position`
`bg-repeat`	`background-repeat`
`bg-attachment`	`background-attachment`
`bg-clip`	`background-clip`
`bg-origin`	`background-origin`
`bg-gradient`	`background-image`
`from`	`--tw-gradient-from`
`via`	`--tw-gradient-via`
`to`	`--tw-gradient-to`
`color`	`color`
`text`	`color`
`text-color`	`color`
`fill`	`fill`
`stroke`	`stroke`
`stroke-width`	`stroke-width`
`caret-color`	`caret-color`
`accent-color`	`accent-color`
`border`	`border-width`
`border-width`	`border-width`
`border-color`	`border-color`
`border-style`	`border-style`
`border-t`	`border-top-width`
`border-b`	`border-bottom-width`
`border-l`	`border-left-width`
`border-r`	`border-right-width`
`border-x`	`border-left-width, border-right-width`
`border-y`	`border-top-width, border-bottom-width`
`border-inline`	`border-inline-width`
`border-inline-start`	`border-inline-start-width`
`border-inline-end`	`border-inline-end-width`
`border-block`	`border-block-width`
`border-block-start`	`border-block-start-width`
`border-block-end`	`border-block-end-width`
`border-inline-color`	`border-inline-color`
`border-inline-start-color`	`border-inline-start-color`
`border-inline-end-color`	`border-inline-end-color`
`border-block-color`	`border-block-color`
`border-block-start-color`	`border-block-start-color`
`border-block-end-color`	`border-block-end-color`
`border-t-color`	`border-top-color`
`border-b-color`	`border-bottom-color`
`border-l-color`	`border-left-color`
`border-r-color`	`border-right-color`
`border-collapse`	`border-collapse`
`border-separate`	`border-collapse: separate`
`outline`	`outline-width`
`outline-color`	`outline-color`
`outline-style`	`outline-style`
`outline-offset`	`outline-offset`
`outline-none`	`outline: 2px solid transparent; outline-offset: 2px`
`ring`	`box-shadow`
`ring-color`	`--tw-ring-color`
`ring-offset`	`--tw-ring-offset-width`
`rounded`	`border-radius`
`radius`	`border-radius`
`rounded-t`	`border-top-left-radius, border-top-right-radius`
`rounded-b`	`border-bottom-left-radius, border-bottom-right-radius`
`rounded-l`	`border-top-left-radius, border-bottom-left-radius`
`rounded-r`	`border-top-right-radius, border-bottom-right-radius`
`rounded-tl`	`border-top-left-radius`
`rounded-tr`	`border-top-right-radius`
`rounded-bl`	`border-bottom-left-radius`
`rounded-br`	`border-bottom-right-radius`
`rounded-ss`	`border-start-start-radius`
`rounded-se`	`border-start-end-radius`
`rounded-es`	`border-end-start-radius`
`rounded-ee`	`border-end-end-radius`
`shadow`	`box-shadow`
`shadow-color`	`--tw-shadow-color`
`text-shadow`	`text-shadow`
`drop-shadow`	`filter`
`opacity`	`opacity`
`font-size`	`font-size`
`text-size`	`font-size`
`font-family`	`font-family`
`font`	`font-family`
`family`	`font-family`
`font-style`	`font-style`
`weight`	`font-weight`
`font-weight`	`font-weight`
`leading`	`line-height`
`line-height`	`line-height`
`tracking`	`letter-spacing`
`letter-spacing`	`letter-spacing`
`word-spacing`	`word-spacing`
`align`	`text-align`
`text-align`	`text-align`
`vertical-align`	`vertical-align`
`decoration`	`text-decoration-line`
`text-decoration`	`text-decoration-line`
`decoration-color`	`text-decoration-color`
`decoration-style`	`text-decoration-style`
`decoration-thickness`	`text-decoration-thickness`
`underline`	`text-decoration-line: underline`
`line-through`	`text-decoration-line: line-through`
`no-underline`	`text-decoration-line: none`
`text-transform`	`text-transform`
`uppercase`	`text-transform: uppercase`
`lowercase`	`text-transform: lowercase`
`capitalize`	`text-transform: capitalize`
`normal-case`	`text-transform: none`
`italic`	`font-style: italic`
`not-italic`	`font-style: normal`
`text-overflow`	`text-overflow`
`truncate`	`overflow: hidden; text-overflow: ellipsis; white-space: nowrap`
`text-ellipsis`	`text-overflow: ellipsis`
`text-clip`	`text-overflow: clip`
`whitespace`	`white-space`
`white-space`	`white-space`
`white-space-collapse`	`white-space-collapse`
`text-box-trim`	`text-box-trim`
`text-box-edge`	`text-box-edge`
`word-break`	`word-break`
`text-wrap`	`text-wrap`
`text-wrap-mode`	`text-wrap-mode`
`text-wrap-style`	`text-wrap-style`
`line-clamp`	`line-clamp`
`line-clamp-lines`	`-webkit-line-clamp`
`overflow-wrap`	`overflow-wrap`
`hyphens`	`hyphens`
`text-indent`	`text-indent`
`columns`	`columns`
`col-count`	`column-count`
`col-width`	`column-width`
`col-gap`	`column-gap`
`list-style`	`list-style-type`
`list-position`	`list-style-position`
`list-style-image`	`list-style-image`
`cursor`	`cursor`
`pointer-events`	`pointer-events`
`user-select`	`user-select`
`select`	`user-select`
`resize`	`resize`
`appearance`	`appearance`
`scroll-behavior`	`scroll-behavior`
`scroll-margin`	`scroll-margin`
`scroll-margin-top`	`scroll-margin-top`
`scroll-margin-right`	`scroll-margin-right`
`scroll-margin-bottom`	`scroll-margin-bottom`
`scroll-margin-left`	`scroll-margin-left`
`scroll-margin-block`	`scroll-margin-block`
`scroll-margin-block-start`	`scroll-margin-block-start`
`scroll-margin-block-end`	`scroll-margin-block-end`
`scroll-margin-inline`	`scroll-margin-inline`
`scroll-margin-inline-start`	`scroll-margin-inline-start`
`scroll-margin-inline-end`	`scroll-margin-inline-end`
`scroll-padding`	`scroll-padding`
`scroll-padding-top`	`scroll-padding-top`
`scroll-padding-right`	`scroll-padding-right`
`scroll-padding-bottom`	`scroll-padding-bottom`
`scroll-padding-left`	`scroll-padding-left`
`scroll-padding-block`	`scroll-padding-block`
`scroll-padding-block-start`	`scroll-padding-block-start`
`scroll-padding-block-end`	`scroll-padding-block-end`
`scroll-padding-inline`	`scroll-padding-inline`
`scroll-padding-inline-start`	`scroll-padding-inline-start`
`scroll-padding-inline-end`	`scroll-padding-inline-end`
`scroll-snap`	`scroll-snap-type`
`scroll-snap-type`	`scroll-snap-type`
`scroll-snap-align`	`scroll-snap-align`
`scroll-snap-stop`	`scroll-snap-stop`
`touch`	`touch-action`
`will-change`	`will-change`
`transform`	`transform`
`transform-origin`	`transform-origin`
`transform-style`	`transform-style`
`backface`	`backface-visibility`
`perspective`	`perspective`
`scale`	`__transform__`
`scale-x`	`__transform__`
`scale-y`	`__transform__`
`rotate`	`__transform__`
`translate-x`	`__transform__`
`translate-y`	`__transform__`
`translate-z`	`__transform__`
`skew-x`	`__transform__`
`skew-y`	`__transform__`
`filter`	`filter`
`backdrop-filter`	`backdrop-filter`
`blur`	`__filter__`
`brightness`	`__filter__`
`contrast`	`__filter__`
`grayscale`	`__filter__`
`hue-rotate`	`__filter__`
`invert`	`__filter__`
`saturate`	`__filter__`
`sepia`	`__filter__`
`backdrop-blur`	`__backdrop-filter__`
`backdrop-brightness`	`__backdrop-filter__`
`backdrop-contrast`	`__backdrop-filter__`
`backdrop-grayscale`	`__backdrop-filter__`
`backdrop-hue-rotate`	`__backdrop-filter__`
`backdrop-invert`	`__backdrop-filter__`
`backdrop-opacity`	`__backdrop-filter__`
`backdrop-saturate`	`__backdrop-filter__`
`backdrop-sepia`	`__backdrop-filter__`
`transition`	`transition-property`
`transition-duration`	`transition-duration`
`duration`	`transition-duration`
`transition-timing`	`transition-timing-function`
`ease`	`transition-timing-function`
`transition-delay`	`transition-delay`
`transition-behavior`	`transition-behavior`
`delay`	`transition-delay`
`animate`	`animation`
`animation-name`	`animation-name`
`animation-duration`	`animation-duration`
`animation-timing`	`animation-timing-function`
`animation-delay`	`animation-delay`
`animation-iteration`	`animation-iteration-count`
`animation-direction`	`animation-direction`
`animation-fill`	`animation-fill-mode`
`animation-play`	`animation-play-state`
`animation-composition`	`animation-composition`
`animation-timeline`	`animation-timeline`
`animation-range`	`animation-range`
`animation-range-start`	`animation-range-start`
`animation-range-end`	`animation-range-end`
`scroll-timeline`	`scroll-timeline`
`scroll-timeline-name`	`scroll-timeline-name`
`scroll-timeline-axis`	`scroll-timeline-axis`
`view-timeline`	`view-timeline`
`view-timeline-name`	`view-timeline-name`
`view-timeline-axis`	`view-timeline-axis`
`view-timeline-inset`	`view-timeline-inset`
`object`	`object-fit`
`object-fit`	`object-fit`
`object-position`	`object-position`
`object-cover`	`object-fit: cover`
`object-contain`	`object-fit: contain`
`object-fill`	`object-fit: fill`
`object-none`	`object-fit: none`
`object-scale-down`	`object-fit: scale-down`
`mask-image`	`mask-image`
`mask-size`	`mask-size`
`mask-position`	`mask-position`
`mask-repeat`	`mask-repeat`
`mask-origin`	`mask-origin`
`mask-clip`	`mask-clip`
`clip-path`	`clip-path`
`shape-outside`	`shape-outside`
`mask-composite`	`mask-composite`
`box-sizing`	`box-sizing`
`box-border`	`box-sizing: border-box`
`box-content`	`box-sizing: content-box`
`float`	`float`
`clear`	`clear`
`isolation`	`isolation`
`isolate`	`isolation: isolate`
`mix-blend`	`mix-blend-mode`
`mix-blend-mode`	`mix-blend-mode`
`bg-blend`	`background-blend-mode`
`background-blend-mode`	`background-blend-mode`
`table-layout`	`table-layout`
`border-spacing`	`border-spacing`
`caption`	`caption-side`
`container`	`container`
`container-name`	`container-name`
`container-type`	`container-type`
`anchor-name`	`anchor-name`
`anchor-scope`	`anchor-scope`
`position-anchor`	`position-anchor`
`position-area`	`position-area`
`position-try`	`position-try`
`position-try-fallbacks`	`position-try-fallbacks`
`position-try-order`	`position-try-order`
`view-transition-name`	`view-transition-name`
`view-transition-class`	`view-transition-class`
`view-transition-scope`	`view-transition-scope`
`content-visibility`	`content-visibility`
`contain`	`contain`
`contain-intrinsic-size`	`contain-intrinsic-size`
`contain-intrinsic-width`	`contain-intrinsic-width`
`contain-intrinsic-height`	`contain-intrinsic-height`
`field-sizing`	`field-sizing`
`interpolate-size`	`interpolate-size`
`color-scheme`	`color-scheme`
`text-emphasis`	`text-emphasis`
`text-emphasis-color`	`text-emphasis-color`
`text-emphasis-style`	`text-emphasis-style`
`text-orientation`	`text-orientation`
`writing-mode`	`writing-mode`
`sr-only`	`position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0`
`not-sr-only`	`position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal`
`print`	`print-color-adjust`
`forced-color`	`forced-color-adjust`
`stroke-linecap`	`stroke-linecap`
`stroke-linejoin`	`stroke-linejoin`
`stroke-dasharray`	`stroke-dasharray`
`stroke-dashoffset`	`stroke-dashoffset`

Browse every registered styling attribute and the CSS property it controls. Use the filter to find an attribute by name or look up a CSS property. Boolean helper attributes such as flex, hidden, and object-cover are listed by their canonical names.

Modifiers

Add a modifier prefix before any supported attribute to apply it at a viewport breakpoint, inside a size container, for a theme, or during an element state. Container variants (cq-sm, cq-md, cq-lg, and cq-xl) query the nearest eligible ancestor marked with container="name / inline-size". The generated query currently uses its minimum width threshold and does not select the container by name.

html

<section container="card / inline-size">
  <article grid-cols="1" cq-md-grid-cols="2" aspect="video">
    ...
  </article>
</section>