README
How to use utility classes
Every utility class begins with @ and contains a single style definition, optionally followed by one or more variants. The final segment specifies the actual styling for elements, while any preceding segments are variants that determine when or where the styling is applied.
A basic utility class looks like this: @d[block]. A more advanced utility class might look like this: @lg:hover:d[block]!. The final part always defines the style to be applied (in this case, display: block). In the advanced example, additional conditions specify when the style should apply — in this case, only from the lg breakpoint and on hover.
Hover, focus, and other states
Using utilities to style elements based on pseudo classes and elements
Pseudo classes
The following pseudo-classes are supported:
:last (mapped to :last-child):first (mapped to :first-child):even (mapped to :nth-child(even)):odd (mapped to :nth-child(odd)):hover:focus:active
Pseudo elements
The following pseudo-elements are supported:
:after:before:placeholder:selection
Responsive design
Using responsive utility variants to apply styles only from specific breakpoints:
Supported breakpoints are:
sm (≥576px)md (≥768px)lg (≥992px)xl (≥1200px)xxl (≥1400px)
Dark mode
Using variants to style your site in dark mode.
You can easily use the dark variant to only apply the style on dark mode. Like this: @dark:color[#FFF]
Utility classes list
Layout
aspect-ratio
| Class |
Style |
Example |
| aspect[square] |
aspect-ratio: 1 / 1; |
|
| aspect[auto] |
aspect-ratio: auto; |
|
| aspect[<ratio>] |
aspect-ratio: <ratio>; |
aspect[16/9] |
| aspect[<var>] |
aspect-ratio: <var>; |
aspect[--my-aspect-ratio] |
columns
| Class |
Style |
Example |
| columns[auto] |
columns: auto; |
|
| columns[<number>] |
columns: <number>; |
columns[3] |
| columns[<var>] |
columns: <var>; |
columns[--my-columns] |
break-after
| Class |
Style |
Example |
| break-after[auto] |
break-after: auto; |
|
| break-after[avoid] |
break-after: avoid; |
|
| break-after[all] |
break-after: all; |
|
| break-after[avoid-page] |
break-after: avoid-page; |
|
| break-after[page] |
break-after: page; |
|
| break-after[left] |
break-after: left; |
|
| break-after[right] |
break-after: right; |
|
| break-after[column] |
break-after: column; |
|
| break-after[<var>] |
break-after: *<var>*; |
break-after[--my-break] |
break-before
| Class |
Style |
Example |
| break-before[auto] |
break-before: auto; |
|
| break-before[avoid] |
break-before: avoid; |
|
| break-before[all] |
break-before: all; |
|
| break-before[avoid-page] |
break-before: avoid-page; |
|
| break-before[page] |
break-before: page; |
|
| break-before[left] |
break-before: left; |
|
| break-before[right] |
break-before: right; |
|
| break-before[column] |
break-before: column; |
|
| break-before[<var>] |
break-before: *<var>*; |
break-before[--my-break] |
break-inside
| Class |
Style |
Example |
| break-inside[auto] |
break-inside: auto; |
|
| break-inside[avoid] |
break-inside: avoid; |
|
| break-inside[avoid-page] |
break-inside: avoid-page; |
|
| break-inside[avoid-column] |
break-inside: avoid-column; |
|
| break-inside[<var>] |
break-inside: *<var>*; |
break-inside[--my-break] |
box-decoration-break
| Class |
Style |
Example |
| box-decoration-break[clone] |
box-decoration-break: clone; |
|
| box-decoration-break[slice] |
box-decoration-break: slice; |
|
| box-decoration-break[<var>] |
box-decoration-break: *<var>*; |
box-decoration-break[--my-decoration] |
box-sizing
| Class |
Style |
Example |
| box[border] |
box-sizing: border-box; |
|
| box[content] |
box-sizing: content-box; |
|
| box[<var>] |
box-sizing: *<var>*; |
box[--my-sizing] |
display
| Class |
Style |
Example |
| d[none] |
display: none; |
|
| d[grid] |
display: grid; |
|
| d[inline] |
display: inline; |
|
| d[inline-block] |
display: inline-block; |
|
| d[block] |
display: block; |
|
| d[table] |
display: table; |
|
| d[table-cell] |
display: table-cell; |
|
| d[table-row] |
display: table-row; |
|
| d[flex] |
display: flex; |
|
| d[inline-flex] |
display: inline-flex; |
|
| d[<var>] |
display: *<var>*; |
d[--my-display] |
float
| Class |
Style |
Example |
| float[left] |
float: left; |
|
| float[right] |
float: right; |
|
| float[start] |
float: start; |
|
| float[end] |
float: end; |
|
| float[none] |
float: none; |
|
| float[<var>] |
float: *<var>*; |
float[--my-float] |
clear
| Class |
Style |
Example |
| clear[left] |
clear: left; |
|
| clear[right] |
clear: right; |
|
| clear[both] |
clear: both; |
|
| clear[start] |
clear: start; |
|
| clear[end] |
clear: end; |
|
| clear[none] |
clear: none; |
|
| clear[<var>] |
clear: *<var>*; |
clear[--my-clear] |
isolation
| Class |
Style |
Example |
| isolation[isolate] |
isolation: isolate; |
|
| isolation[auto] |
isolation: auto; |
|
| isolation[<var>] |
isolation: *<var>*; |
isolation[--my-isolation] |
object-fit
| Class |
Style |
Example |
| object-fit[contain] |
object-fit: contain; |
|
| object-fit[cover] |
object-fit: cover; |
|
| object-fit[fill] |
object-fit: fill; |
|
| object-fit[none] |
object-fit: none; |
|
| object-fit[scale-down] |
object-fit: scale-down; |
|
| object-fit[<var>] |
object-fit: *<var>*; |
object-fit[--my-fit] |
| object-fit[<custom>] |
object-fit: *<custom>*; |
object-fit[custom-value] |
object-position
| Class |
Style |
Example |
| object-position[top-left] |
object-position: top left; |
|
| object-position[top] |
object-position: top; |
|
| object-position[top-right] |
object-position: top right; |
|
| object-position[left] |
object-position: left; |
|
| object-position[center] |
object-position: center; |
|
| object-position[right] |
object-position: right; |
|
| object-position[bottom-left] |
object-position: bottom left; |
|
| object-position[bottom] |
object-position: bottom; |
|
| object-position[bottom-right] |
object-position: bottom right; |
|
| object-position[<var>] |
object-position: *<var>*; |
object-position[--my-position] |
| object-position[<custom>] |
object-position: *<custom>*; |
object-position[custom-value] |
overflow
| Class |
Style |
Example |
| overflow[visible] |
overflow: visible; |
|
| overflow[hidden] |
overflow: hidden; |
|
| overflow[scroll] |
overflow: scroll; |
|
| overflow[clip] |
overflow: clip; |
|
| overflow[auto] |
overflow: auto; |
|
| overflow[<var>] |
overflow: *<var>*; |
overflow[--my-overflow] |
overflow-x
| Class |
Style |
Example |
| overflow-x[visible] |
overflow-x: visible; |
|
| overflow-x[hidden] |
overflow-x: hidden; |
|
| overflow-x[scroll] |
overflow-x: scroll; |
|
| overflow-x[clip] |
overflow-x: clip; |
|
| overflow-x[auto] |
overflow-x: auto; |
|
| overflow-x[<var>] |
overflow-x: *<var>*; |
overflow-x[--my-overflow] |
overflow-y
| Class |
Style |
Example |
| overflow-y[visible] |
overflow-y: visible; |
|
| overflow-y[hidden] |
overflow-y: hidden; |
|
| overflow-y[scroll] |
overflow-y: scroll; |
|
| overflow-y[clip] |
overflow-y: clip; |
|
| overflow-y[auto] |
overflow-y: auto; |
|
| overflow-y[<var>] |
overflow-y: *<var>*; |
overflow-y[--my-overflow] |
overscroll-behavior
| Class |
Style |
Example |
| overscroll[auto] |
overscroll-behavior: auto; |
|
| overscroll[contain] |
overscroll-behavior: contain; |
|
| overscroll[none] |
overscroll-behavior: none; |
|
| overscroll[<var>] |
overscroll-behavior: *<var>*; |
overscroll[--my-overscroll] |
position
| Class |
Style |
Example |
| position[static] |
position: static; |
|
| position[fixed] |
position: fixed; |
|
| position[absolute] |
position: absolute; |
|
| position[relative] |
position: relative; |
|
| position[sticky] |
position: sticky; |
|
| position[<var>] |
position: *<var>*; |
position[--my-position] |
top / right / bottom / left
| Class |
Style |
Example |
| top[auto] |
top: auto; |
|
| top[full] |
top: 100%; |
|
| top[<fraction>] |
top: *<fraction>*; |
top[1/2] |
| top[<dimension>] |
top: *<dimension>*; |
top[10px] |
| top[<var>] |
top: *<var>*; |
top[--my-top] |
| right[auto] |
right: auto; |
|
| right[full] |
right: 100%; |
|
| right[<fraction>] |
right: *<fraction>*; |
right[1/2] |
| right[<dimension>] |
right: *<dimension>*; |
right[10px] |
| right[<var>] |
right: *<var>*; |
right[--my-right] |
| bottom[auto] |
bottom: auto; |
|
| bottom[full] |
bottom: 100%; |
|
| bottom[<fraction>] |
bottom: *<fraction>*; |
bottom[1/2] |
| bottom[<dimension>] |
bottom: *<dimension>*; |
bottom[10px] |
| bottom[<var>] |
bottom: *<var>*; |
bottom[--my-bottom] |
| left[auto] |
left: auto; |
|
| left[full] |
left: 100%; |
|
| left[<fraction>] |
left: *<fraction>*; |
left[1/2] |
| left[<dimension>] |
left: *<dimension>*; |
left[10px] |
| left[<var>] |
left: *<var>*; |
left[--my-left] |
visibility
| Class |
Style |
Example |
| visibility[visible] |
visibility: visible; |
|
| visibility[invisible] |
visibility: invisible; |
|
| visibility[collapsable] |
visibility: collapsable; |
|
| visibility[<var>] |
visibility: *<var>*; |
visibility[--my-visibility] |
z-index
| Class |
Style |
Example |
| z[auto] |
z-index: auto; |
|
| z[<number>] |
z-index: *<number>*; |
z[10] |
| z[<var>] |
z-index: *<var>*; |
z[--my-z] |
Flex
flex
| Class |
Style |
Example |
| flex[auto] |
flex: auto; |
|
| flex[none] |
flex: none; |
|
| flex[initial] |
flex: 0 auto; |
|
| flex[1] |
flex: 1; |
|
| flex[<number>] |
flex: *<number>*; |
flex[2] |
| flex[<custom>] |
flex: *<custom>*; |
flex[1_0_auto] |
flex-basis
| Class |
Style |
Example |
| flex[basis:auto] |
flex-basis: auto; |
|
| flex[basis:full] |
flex-basis: 100%; |
|
| flex[basis:<fraction>] |
flex-basis: *<fraction>*; |
flex[basis:1/2] |
| flex[basis:<dimension>] |
flex-basis: *<dimension>*; |
flex[basis:10px] |
| flex[basis:<var>] |
flex-basis: *<var>*; |
flex[basis:--my-basis] |
flex-direction
| Class |
Style |
Example |
| flex[row] |
flex-direction: row; |
|
| flex[row-reverse] |
flex-direction: row-reverse; |
|
| flex[column] |
flex-direction: column; |
|
| flex[column-reverse] |
flex-direction: column-reverse; |
|
flex-wrap
| Class |
Style |
Example |
| flex[nowrap] |
flex-wrap: nowrap; |
|
| flex[wrap] |
flex-wrap: wrap; |
|
| flex[wrap-reverse] |
flex-wrap: wrap-reverse; |
|
flex-grow
| Class |
Style |
Example |
| flex[grow] |
flex-grow: 1; |
|
| flex[grow:<number>] |
flex-grow: *<number>*; |
flex[grow:2] |
| flex[grow:<var>] |
flex-grow: *<var>*; |
flex[grow:--my-grow] |
flex-shrink
| Class |
Style |
Example |
| flex[shrink] |
flex-shrink: 1; |
|
| flex[shrink:<number>] |
flex-shrink: *<number>*; |
flex[shrink:2] |
| flex[shrink:<var>] |
flex-shrink: *<var>*; |
flex[shrink:--my-shrink] |
order
| Class |
Style |
Example |
| order[first] |
order: -9999; |
|
| order[last] |
order: 9999; |
|
| order[none] |
order: 0; |
|
| order[<number>] |
order: *<number>*; |
order[2] |
| order[<var>] |
order: *<var>*; |
order[--my-order] |
Grid
grid-template-columns
| Class |
Style |
Example |
| grid[cols:none] |
grid-template-columns: none; |
|
| grid[cols:subgrid] |
grid-template-columns: subgrid; |
|
| grid[cols:<number>] |
grid-template-columns: repeat(*<number>*, minmax(0, 1fr)); |
grid[cols:3] |
| grid[cols:<custom>] |
grid-template-columns: *<custom>*; |
grid[cols:[200px_1fr_200px]] |
| grid[cols:<var>] |
grid-template-columns: *<var>*; |
grid[cols:--my-cols] |
grid-template-rows
| Class |
Style |
Example |
| grid[rows:none] |
grid-template-rows: none; |
|
| grid[rows:subgrid] |
grid-template-rows: subgrid; |
|
| grid[rows:<number>] |
grid-template-rows: repeat(*<number>*, minmax(0, 1fr)); |
grid[rows:3] |
| grid[rows:<custom>] |
grid-template-rows: *<custom>*; |
grid[rows:[100px_1fr]] |
| grid[rows:<var>] |
grid-template-rows: *<var>*; |
grid[rows:--my-rows] |
grid-column-span
| Class |
Style |
Example |
| grid[span:full] |
grid-column: 1 / -1; |
|
| grid[span:<number>] |
grid-column: span *<number>* / span *<number>*; |
grid[span:2] |
| grid[span:<var>] |
grid-column: span *<var>* / span *<var>*; |
grid[span:--my-span] |
grid-column
| Class |
Style |
Example |
| grid[column:auto] |
grid-column: auto; |
|
| grid[column:<number>] |
grid-column: *<number>*; |
grid[column:2] |
| grid[column:<var>] |
grid-column: *<var>*; |
grid[column:--my-col] |
| grid[column-start:auto] |
grid-column-start: auto; |
|
| grid[column-start:<number>] |
grid-column-start: *<number>*; |
grid[column-start:1] |
| grid[column-end:auto] |
grid-column-end: auto; |
|
| grid[column-end:<number>] |
grid-column-end: *<number>*; |
grid[column-end:3] |
grid-row
| Class |
Style |
Example |
| grid[row:auto] |
grid-row: auto; |
|
| grid[row:<number>] |
grid-row: *<number>*; |
grid[row:2] |
| grid[row:<var>] |
grid-row: *<var>*; |
grid[row:--my-row] |
grid-auto-flow
| Class |
Style |
Example |
| grid[flow:row] |
grid-auto-flow: row; |
|
| grid[flow:column] |
grid-auto-flow: column; |
|
| grid[flow:dense] |
grid-auto-flow: dense; |
|
| grid[flow:row-dense] |
grid-auto-flow: row dense; |
|
| grid[flow:column-dense] |
grid-auto-flow: column dense; |
|
grid-auto-columns
| Class |
Style |
Example |
| grid[auto-columns:auto] |
grid-auto-columns: auto; |
|
| grid[auto-columns:min] |
grid-auto-columns: min-content; |
|
| grid[auto-columns:max] |
grid-auto-columns: max-content; |
|
| grid[auto-columns:fr] |
grid-auto-columns: minmax(0, 1fr); |
|
| grid[auto-columns:<dimension>] |
grid-auto-columns: *<dimension>*; |
grid[auto-columns:100px] |
| grid[auto-columns:<var>] |
grid-auto-columns: *<var>*; |
grid[auto-columns:--my-cols] |
grid-auto-rows
| Class |
Style |
Example |
| grid[auto-rows:auto] |
grid-auto-rows: auto; |
|
| grid[auto-rows:min] |
grid-auto-rows: min-content; |
|
| grid[auto-rows:max] |
grid-auto-rows: max-content; |
|
| grid[auto-rows:fr] |
grid-auto-rows: minmax(0, 1fr); |
|
| grid[auto-rows:<dimension>] |
grid-auto-rows: *<dimension>*; |
grid[auto-rows:100px] |
| grid[auto-rows:<var>] |
grid-auto-rows: *<var>*; |
grid[auto-rows:--my-rows] |
gap
| Class |
Style |
Example |
| gap[<theme-size>] |
gap: var(--theme-gap-*<theme-size\>*); |
gap[sm] |
| gap[<dimension>] |
gap: *<dimension>*; |
gap[10px] |
| gap[<var>] |
gap: *<var>*; |
gap[--my-gap] |
| gap[x:<dimension>] |
column-gap: *<dimension>*; |
gap[x:10px] |
| gap[x:<var>] |
column-gap: *<var>*; |
gap[x:--my-gap] |
| gap[y:<dimension>] |
row-gap: *<dimension>*; |
gap[y:10px] |
| gap[y:<var>] |
row-gap: *<var>*; |
gap[y:--my-gap] |
justify-content
| Class |
Style |
Example |
| justify-content[start] |
justify-content: start; |
|
| justify-content[end] |
justify-content: end; |
|
| justify-content[center] |
justify-content: center; |
|
| justify-content[between] |
justify-content: space-between; |
|
| justify-content[around] |
justify-content: space-around; |
|
| justify-content[evenly] |
justify-content: space-evenly; |
|
| justify-content[stretch] |
justify-content: stretch; |
|
| justify-content[baseline] |
justify-content: baseline; |
|
| justify-content[normal] |
justify-content: normal; |
|
| justify-content[end-safe] |
justify-content: safe end; |
|
| justify-content[center-safe] |
justify-content: safe center; |
|
justify-items
| Class |
Style |
Example |
| justify-items[start] |
justify-items: start; |
|
| justify-items[end] |
justify-items: end; |
|
| justify-items[center] |
justify-items: center; |
|
| justify-items[stretch] |
justify-items: stretch; |
|
| justify-items[normal] |
justify-items: normal; |
|
| justify-items[end-safe] |
justify-items: safe end; |
|
| justify-items[center-safe] |
justify-items: safe center; |
|
justify-self
| Class |
Style |
Example |
| justify-self[auto] |
justify-self: auto; |
|
| justify-self[start] |
justify-self: start; |
|
| justify-self[end] |
justify-self: end; |
|
| justify-self[center] |
justify-self: center; |
|
| justify-self[stretch] |
justify-self: stretch; |
|
| justify-self[end-safe] |
justify-self: safe end; |
|
| justify-self[center-safe] |
justify-self: safe center; |
|
align-content
| Class |
Style |
Example |
| align-content[start] |
align-content: start; |
|
| align-content[end] |
align-content: end; |
|
| align-content[center] |
align-content: center; |
|
| align-content[between] |
align-content: space-between; |
|
| align-content[around] |
align-content: space-around; |
|
| align-content[evenly] |
align-content: space-evenly; |
|
| align-content[stretch] |
align-content: stretch; |
|
| align-content[baseline] |
align-content: baseline; |
|
| align-content[normal] |
align-content: normal; |
|
| align-content[end-safe] |
align-content: safe end; |
|
| align-content[center-safe] |
align-content: safe center; |
|
align-items
| Class |
Style |
Example |
| align-items[start] |
align-items: start; |
|
| align-items[end] |
align-items: end; |
|
| align-items[center] |
align-items: center; |
|
| align-items[stretch] |
align-items: stretch; |
|
| align-items[baseline] |
align-items: baseline; |
|
| align-items[baseline-last] |
align-items: last baseline; |
|
| align-items[end-safe] |
align-items: safe end; |
|
| align-items[center-safe] |
align-items: safe center; |
|
align-self
| Class |
Style |
Example |
| align-self[auto] |
align-self: auto; |
|
| align-self[start] |
align-self: start; |
|
| align-self[end] |
align-self: end; |
|
| align-self[center] |
align-self: center; |
|
| align-self[stretch] |
align-self: stretch; |
|
| align-self[baseline] |
align-self: baseline; |
|
| align-self[baseline-last] |
align-self: last baseline; |
|
| align-self[end-safe] |
align-self: safe end; |
|
| align-self[center-safe] |
align-self: safe center; |
|
place-content
| Class |
Style |
Example |
| place-content[start] |
place-content: start; |
|
| place-content[end] |
place-content: end; |
|
| place-content[center] |
place-content: center; |
|
| place-content[between] |
place-content: space-between; |
|
| place-content[around] |
place-content: space-around; |
|
| place-content[evenly] |
place-content: space-evenly; |
|
| place-content[baseline] |
place-content: baseline; |
|
| place-content[stretch] |
place-content: stretch; |
|
| place-content[end-safe] |
place-content: safe end; |
|
| place-content[center-safe] |
place-content: safe center; |
|
place-items
| Class |
Style |
Example |
| place-items[start] |
place-items: start; |
|
| place-items[end] |
place-items: end; |
|
| place-items[center] |
place-items: center; |
|
| place-items[stretch] |
place-items: stretch; |
|
| place-items[baseline] |
place-items: baseline; |
|
place-self
| Class |
Style |
Example |
| place-self[auto] |
place-self: auto; |
|
| place-self[start] |
place-self: start; |
|
| place-self[end] |
place-self: end; |
|
| place-self[center] |
place-self: center; |
|
| place-self[stretch] |
place-self: stretch; |
|
Spacing
padding
| Class |
Style |
Example |
| p[auto] |
padding: auto; |
|
| p[<dimension>] |
padding: *<dimension>*; |
p[10px] |
| p[<var>] |
padding: *<var>*; |
p[--my-padding] |
| pt[<dimension>] |
padding-top: *<dimension>*; |
pt[10px] |
| pb[<dimension>] |
padding-bottom: *<dimension>*; |
pb[10px] |
| ps[<dimension>] |
padding-left: *<dimension>*; |
ps[10px] |
| pe[<dimension>] |
padding-right: *<dimension>*; |
pe[10px] |
| px[<dimension>] |
padding-left: *<dimension>*; padding-right: *<dimension>*; |
px[10px] |
| py[<dimension>] |
padding-top: *<dimension>*; padding-bottom: *<dimension>*; |
py[10px] |
margin
| Class |
Style |
Example |
| m[auto] |
margin: auto; |
|
| m[<dimension>] |
margin: *<dimension>*; |
m[10px] |
| m[<var>] |
margin: *<var>*; |
m[--my-margin] |
| mt[<dimension>] |
margin-top: *<dimension>*; |
mt[10px] |
| mb[<dimension>] |
margin-bottom: *<dimension>*; |
mb[10px] |
| ms[<dimension>] |
margin-left: *<dimension>*; |
ms[10px] |
| me[<dimension>] |
margin-right: *<dimension>*; |
me[10px] |
| mx[<dimension>] |
margin-left: *<dimension>*; margin-right: *<dimension>*; |
mx[10px] |
| mx[auto] |
margin-left: auto; margin-right: auto; |
|
| my[<dimension>] |
margin-top: *<dimension>*; margin-bottom: *<dimension>*; |
my[10px] |
Sizing
width
| Class |
Style |
Example |
| w[auto] |
width: auto; |
|
| w[full] |
width: 100%; |
|
| w[screen] |
width: 100vw; |
|
| w[dvw] |
width: 100dvw; |
|
| w[lvw] |
width: 100lvw; |
|
| w[svw] |
width: 100svw; |
|
| w[min] |
width: min-content; |
|
| w[max] |
width: max-content; |
|
| w[fit] |
width: fit-content; |
|
| w[lh] |
width: 1lh; |
|
| w[<dimension>] |
width: *<dimension>*; |
w[10px] |
| w[<fraction>] |
width: *<fraction>*; |
w[1/2] |
| w[<var>] |
width: *<var>*; |
w[--my-width] |
min-width
| Class |
Style |
Example |
| min-w[auto] |
min-width: auto; |
|
| min-w[full] |
min-width: 100%; |
|
| min-w[screen] |
min-width: 100vw; |
|
| min-w[dvw] |
min-width: 100dvw; |
|
| min-w[lvw] |
min-width: 100lvw; |
|
| min-w[svw] |
min-width: 100svw; |
|
| min-w[min] |
min-width: min-content; |
|
| min-w[max] |
min-width: max-content; |
|
| min-w[fit] |
min-width: fit-content; |
|
| min-w[<dimension>] |
min-width: *<dimension>*; |
min-w[10px] |
| min-w[<fraction>] |
min-width: *<fraction>*; |
min-w[1/2] |
| min-w[<var>] |
min-width: *<var>*; |
min-w[--my-min-width] |
max-width
| Class |
Style |
Example |
| max-w[auto] |
max-width: auto; |
|
| max-w[full] |
max-width: 100%; |
|
| max-w[screen] |
max-width: 100vw; |
|
| max-w[dvw] |
max-width: 100dvw; |
|
| max-w[lvw] |
max-width: 100lvw; |
|
| max-w[svw] |
max-width: 100svw; |
|
| max-w[min] |
max-width: min-content; |
|
| max-w[max] |
max-width: max-content; |
|
| max-w[fit] |
max-width: fit-content; |
|
| max-w[<dimension>] |
max-width: *<dimension>*; |
max-w[10px] |
| max-w[<fraction>] |
max-width: *<fraction>*; |
max-w[1/2] |
| max-w[<var>] |
max-width: *<var>*; |
max-w[--my-max-width] |
height
| Class |
Style |
Example |
| h[auto] |
height: auto; |
|
| h[full] |
height: 100%; |
|
| h[screen] |
height: 100vh; |
|
| h[dvh] |
height: 100dvh; |
|
| h[lvh] |
height: 100lvh; |
|
| h[svh] |
height: 100svh; |
|
| h[min] |
height: min-content; |
|
| h[max] |
height: max-content; |
|
| h[fit] |
height: fit-content; |
|
| h[lh] |
height: 1lh; |
|
| h[<dimension>] |
height: *<dimension>*; |
h[10px] |
| h[<fraction>] |
height: *<fraction>*; |
h[1/2] |
| h[<var>] |
height: *<var>*; |
h[--my-height] |
min-height
| Class |
Style |
Example |
| min-h[auto] |
min-height: auto; |
|
| min-h[full] |
min-height: 100%; |
|
| min-h[screen] |
min-height: 100vh; |
|
| min-h[dvh] |
min-height: 100dvh; |
|
| min-h[lvh] |
min-height: 100lvh; |
|
| min-h[svh] |
min-height: 100svh; |
|
| min-h[min] |
min-height: min-content; |
|
| min-h[max] |
min-height: max-content; |
|
| min-h[fit] |
min-height: fit-content; |
|
| min-h[<dimension>] |
min-height: *<dimension>*; |
min-h[10px] |
| min-h[<fraction>] |
min-height: *<fraction>*; |
min-h[1/2] |
| min-h[<var>] |
min-height: *<var>*; |
min-h[--my-min-height] |
max-height
| Class |
Style |
Example |
| max-h[auto] |
max-height: auto; |
|
| max-h[full] |
max-height: 100%; |
|
| max-h[screen] |
max-height: 100vh; |
|
| max-h[dvh] |
max-height: 100dvh; |
|
| max-h[lvh] |
max-height: 100lvh; |
|
| max-h[svh] |
max-height: 100svh; |
|
| max-h[min] |
max-height: min-content; |
|
| max-h[max] |
max-height: max-content; |
|
| max-h[fit] |
max-height: fit-content; |
|
| max-h[<dimension>] |
max-height: *<dimension>*; |
max-h[10px] |
| max-h[<fraction>] |
max-height: *<fraction>*; |
max-h[1/2] |
| max-h[<var>] |
max-height: *<var>*; |
max-h[--my-max-height] |
Typography
font-family
| Class |
Style |
Example |
| font[family:sans] |
font-family: var(--theme-font-sans); |
|
| font[family:serif] |
font-family: var(--theme-font-serif); |
|
| font[family:mono] |
font-family: var(--theme-font-mono); |
|
| font[family:<var>] |
font-family: *<var>*; |
font[family:--my-font] |
| font[family:<custom>] |
font-family: *<custom>*; |
font[family:Georgia] |
font-size
| Class |
Style |
Example |
| font[size:xs] |
font-size: var(--theme-font-xs); |
|
| font[size:sm] |
font-size: var(--theme-font-sm); |
|
| font[size:md] |
font-size: var(--theme-font-md); |
|
| font[size:lg] |
font-size: var(--theme-font-lg); |
|
| font[size:xl] |
font-size: var(--theme-font-xl); |
|
| font[size:<dimension>] |
font-size: *<dimension>*; |
font[size:20px] |
| font[size:<var>] |
font-size: *<var>*; |
font[size:--my-size] |
font-smoothing
| Class |
Style |
Example |
| font[smoothing:antialiased] |
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; |
|
| font[smoothing:auto] |
-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; |
|
| font[smoothing:none] |
-webkit-font-smoothing: none; |
|
font-style
| Class |
Style |
Example |
| font[style:italic] |
font-style: italic; |
|
| font[style:normal] |
font-style: normal; |
|
font-weight
| Class |
Style |
Example |
| font[weight:100] |
font-weight: 100; |
|
| font[weight:200] |
font-weight: 200; |
|
| font[weight:300] |
font-weight: 300; |
|
| font[weight:400] |
font-weight: 400; |
|
| font[weight:500] |
font-weight: 500; |
|
| font[weight:600] |
font-weight: 600; |
|
| font[weight:700] |
font-weight: 700; |
|
| font[weight:800] |
font-weight: 800; |
|
| font[weight:900] |
font-weight: 900; |
|
| font[weight:bold] |
font-weight: bold; |
|
| font[weight:bolder] |
font-weight: bolder; |
|
font-stretch
| Class |
Style |
Example |
| font[stretch:ultra-condensed] |
font-stretch: ultra-condensed; |
|
| font[stretch:extra-condensed] |
font-stretch: extra-condensed; |
|
| font[stretch:condensed] |
font-stretch: condensed; |
|
| font[stretch:semi-condensed] |
font-stretch: semi-condensed; |
|
| font[stretch:normal] |
font-stretch: normal; |
|
| font[stretch:semi-expanded] |
font-stretch: semi-expanded; |
|
| font[stretch:expanded] |
font-stretch: expanded; |
|
| font[stretch:extra-expanded] |
font-stretch: extra-expanded; |
|
| font[stretch:ultra-expanded] |
font-stretch: ultra-expanded; |
|
| font[stretch:<percentage>] |
font-stretch: *<percentage>*; |
font[stretch:75%] |
| font[stretch:<var>] |
font-stretch: *<var>*; |
font[stretch:--my-stretch] |
font-variant-numeric
| Class |
Style |
Example |
| font[variant-numeric:normal] |
font-variant-numeric: normal; |
|
| font[variant-numeric:ordinal] |
font-variant-numeric: ordinal; |
|
| font[variant-numeric:slashed-zero] |
font-variant-numeric: slashed-zero; |
|
| font[variant-numeric:lining-nums] |
font-variant-numeric: lining-nums; |
|
| font[variant-numeric:oldstyle-nums] |
font-variant-numeric: oldstyle-nums; |
|
| font[variant-numeric:proportional-nums] |
font-variant-numeric: proportional-nums; |
|
| font[variant-numeric:tabular-nums] |
font-variant-numeric: tabular-nums; |
|
| font[variant-numeric:diagonal-fractions] |
font-variant-numeric: diagonal-fractions; |
|
| font[variant-numeric:stacked-fractions] |
font-variant-numeric: stacked-fractions; |
|
letter-spacing
| Class |
Style |
Example |
| letterspacing[tight] |
letter-spacing: var(--theme-letterSpacing-tight); |
|
| letterspacing[normal] |
letter-spacing: var(--theme-letterSpacing-normal); |
|
| letterspacing[wide] |
letter-spacing: var(--theme-letterSpacing-wide); |
|
| letterspacing[<dimension>] |
letter-spacing: *<dimension>*; |
letterspacing[2px] |
| letterspacing[<var>] |
letter-spacing: *<var>*; |
letterspacing[--my-spacing] |
line-clamp
| Class |
Style |
Example |
| lineclamp[none] |
line-clamp: none; |
|
| lineclamp[<number>] |
line-clamp: *<number>*; |
lineclamp[3] |
| lineclamp[<var>] |
line-clamp: *<var>*; |
lineclamp[--my-clamp] |
line-height
| Class |
Style |
Example |
| lh[none] |
line-height: none; |
|
| lh[tight] |
line-height: var(--theme-lineHeight-tight); |
|
| lh[snug] |
line-height: var(--theme-lineHeight-snug); |
|
| lh[normal] |
line-height: var(--theme-lineHeight-normal); |
|
| lh[relaxed] |
line-height: var(--theme-lineHeight-relaxed); |
|
| lh[loose] |
line-height: var(--theme-lineHeight-loose); |
|
| lh[<number>] |
line-height: *<number>*; |
lh[1.5] |
| lh[<var>] |
line-height: *<var>*; |
lh[--my-height] |
list-style-image
| Class |
Style |
Example |
| list[image:none] |
list-style-image: none; |
|
| list[image:<url>] |
list-style-image: *<url>*; |
list[image:url(image.png)] |
| list[image:<var>] |
list-style-image: *<var>*; |
list[image:--my-image] |
list-style-position
| Class |
Style |
Example |
| list[position:inside] |
list-style-position: inside; |
|
| list[position:outside] |
list-style-position: outside; |
|
list-style-type
| Class |
Style |
Example |
| list[type:none] |
list-style-type: none; |
|
| list[type:disc] |
list-style-type: disc; |
|
| list[type:decimal] |
list-style-type: decimal; |
|
| list[type:<custom>] |
list-style-type: *<custom>*; |
list[type:upper-roman] |
| list[type:<var>] |
list-style-type: *<var>*; |
list[type:--my-type] |
text-align
| Class |
Style |
Example |
| text[left] |
text-align: left; |
|
| text[center] |
text-align: center; |
|
| text[right] |
text-align: right; |
|
| text[justify] |
text-align: justify; |
|
| text[start] |
text-align: start; |
|
| text[end] |
text-align: end; |
|
text-decoration
| Class |
Style |
Example |
| text[underline] |
text-decoration: underline; |
|
| text[overline] |
text-decoration: overline; |
|
| text[line-through] |
text-decoration: line-through; |
|
| text[no-underline] |
text-decoration: none; |
|
text-transform
| Class |
Style |
Example |
| text[uppercase] |
text-transform: uppercase; |
|
| text[lowercase] |
text-transform: lowercase; |
|
| text[capitalize] |
text-transform: capitalize; |
|
| text[normal-case] |
text-transform: none; |
|
text-overflow
| Class |
Style |
Example |
| text[truncate] |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
|
| text[ellipsis] |
text-overflow: ellipsis; |
|
| text[clip] |
text-overflow: clip; |
|
text-wrap
| Class |
Style |
Example |
| text[wrap] |
text-wrap: wrap; |
|
| text[nowrap] |
text-wrap: nowrap; |
|
| text[balance] |
text-wrap: balance; |
|
| text[pretty] |
text-wrap: pretty; |
|
text-indent
| Class |
Style |
Example |
| text[indent:<dimension>] |
text-indent: *<dimension>*; |
text[indent:2em] |
| text[indent:<var>] |
text-indent: *<var>*; |
text[indent:--my-indent] |
vertical-align
| Class |
Style |
Example |
| text[vertical:baseline] |
vertical-align: baseline; |
|
| text[vertical:top] |
vertical-align: top; |
|
| text[vertical:middle] |
vertical-align: middle; |
|
| text[vertical:bottom] |
vertical-align: bottom; |
|
| text[vertical:text-top] |
vertical-align: text-top; |
|
| text[vertical:text-bottom] |
vertical-align: text-bottom; |
|
| text[vertical:sub] |
vertical-align: sub; |
|
| text[vertical:super] |
vertical-align: super; |
|
| text[vertical:<dimension>] |
vertical-align: *<dimension>*; |
text[vertical:4px] |
| text[vertical:<var>] |
vertical-align: *<var>*; |
text[vertical:--my-align] |
white-space
| Class |
Style |
Example |
| whitespace[normal] |
white-space: normal; |
|
| whitespace[nowrap] |
white-space: nowrap; |
|
| whitespace[pre] |
white-space: pre; |
|
| whitespace[pre-line] |
white-space: pre-line; |
|
| whitespace[pre-wrap] |
white-space: pre-wrap; |
|
| whitespace[break-spaces] |
white-space: break-spaces; |
|
word-break
| Class |
Style |
Example |
| wordbreak[normal] |
word-break: normal; |
|
| wordbreak[break-all] |
word-break: break-all; |
|
| wordbreak[keep-all] |
word-break: keep-all; |
|
overflow-wrap
| Class |
Style |
Example |
| overflow-wrap[normal] |
overflow-wrap: normal; |
|
| overflow-wrap[break-word] |
overflow-wrap: break-word; |
|
| overflow-wrap[anywhere] |
overflow-wrap: anywhere; |
|
| overflow-wrap[<var>] |
overflow-wrap: *<var>*; |
overflow-wrap[--my-wrap] |
hyphens
| Class |
Style |
Example |
| hyphens[none] |
hyphens: none; |
|
| hyphens[manual] |
hyphens: manual; |
|
| hyphens[auto] |
hyphens: auto; |
|
| hyphens[<var>] |
hyphens: *<var>*; |
hyphens[--my-hyphens] |
content
| Class |
Style |
Example |
| content[none] |
content: none; |
|
| content[<string>] |
content: *<string>*; |
content["Hello"] |
| content[<var>] |
content: *<var>*; |
content[--my-content] |
Backgrounds
background-attachment
| Class |
Style |
Example |
| bg[fixed] |
background-attachment: fixed; |
|
| bg[local] |
background-attachment: local; |
|
| bg[scroll] |
background-attachment: scroll; |
|
background-clip
| Class |
Style |
Example |
| bg[clip:border] |
background-clip: border-box; |
|
| bg[clip:padding] |
background-clip: padding-box; |
|
| bg[clip:content] |
background-clip: content-box; |
|
| bg[clip:text] |
background-clip: text; |
|
background-color
| Class |
Style |
Example |
| bg[none] |
background-color: none; |
|
| bg[inherit] |
background-color: inherit; |
|
| bg[transparent] |
background-color: transparent; |
|
| bg[current] |
background-color: currentColor; |
|
| bg[<hex>] |
background-color: *<hex>*; |
bg[#ff0000] |
| bg[<color-function>] |
background-color: *<color-function>*; |
bg[oklch(70%_0.1_180)] |
| bg[<var>] |
background-color: *<var>*; |
bg[--my-bg] |
background-image
| Class |
Style |
Example |
| bg[image:<url>] |
background-image: *<url>*; |
bg[image:url(image.png)] |
| bg[image:<var>] |
background-image: *<var>*; |
bg[image:--my-image] |
| bg[url(<src>)] |
background-image: url(*<src>*); |
bg[url(image.png)] |
background-origin
| Class |
Style |
Example |
| bg[origin:border] |
background-origin: border-box; |
|
| bg[origin:padding] |
background-origin: padding-box; |
|
| bg[origin:content] |
background-origin: content-box; |
|
background-position
| Class |
Style |
Example |
| bg[position:top] |
background-position: top; |
|
| bg[position:right] |
background-position: right; |
|
| bg[position:bottom] |
background-position: bottom; |
|
| bg[position:left] |
background-position: left; |
|
| bg[position:center] |
background-position: center; |
|
| bg[position:<custom>] |
background-position: *<custom>*; |
bg[position:center_top] |
| bg[position:<var>] |
background-position: *<var>*; |
bg[position:--my-position] |
background-repeat
| Class |
Style |
Example |
| bg[repeat] |
background-repeat: repeat; |
|
| bg[repeat:repeat] |
background-repeat: repeat; |
|
| bg[repeat:no-repeat] |
background-repeat: no-repeat; |
|
| bg[repeat:space] |
background-repeat: space; |
|
| bg[repeat:round] |
background-repeat: round; |
|
| bg[repeat:x] |
background-repeat: repeat-x; |
|
| bg[repeat:y] |
background-repeat: repeat-y; |
|
| bg[repeat:<var>] |
background-repeat: *<var>*; |
bg[repeat:--my-repeat] |
background-size
| Class |
Style |
Example |
| bg[size:auto] |
background-size: auto; |
|
| bg[size:cover] |
background-size: cover; |
|
| bg[size:contain] |
background-size: contain; |
|
| bg[size:<custom>] |
background-size: *<custom>*; |
bg[size:100px_auto] |
| bg[size:<var>] |
background-size: *<var>*; |
bg[size:--my-size] |
Borders
border-radius
| Class |
Style |
Example |
| border[radius:none] |
border-radius: 0; |
|
| border[radius:full] |
border-radius: calc(infinity * 1px); |
|
| border[radius:sm] |
border-radius: var(--theme-radius-sm); |
|
| border[radius:md] |
border-radius: var(--theme-radius-md); |
|
| border[radius:lg] |
border-radius: var(--theme-radius-lg); |
|
| border[radius:<dimension>] |
border-radius: *<dimension>*; |
border[radius:10px] |
| border[radius:<var>] |
border-radius: *<var>*; |
border[radius:--my-radius] |
| border[radius-t:<dimension>] |
border-top-left-radius: *<dimension>*; border-top-right-radius: *<dimension>*; |
border[radius-t:8px] |
| border[radius-r:<dimension>] |
border-top-right-radius: *<dimension>*; border-bottom-right-radius: *<dimension>*; |
border[radius-r:8px] |
| border[radius-b:<dimension>] |
border-bottom-left-radius: *<dimension>*; border-bottom-right-radius: *<dimension>*; |
border[radius-b:8px] |
| border[radius-l:<dimension>] |
border-top-left-radius: *<dimension>*; border-bottom-left-radius: *<dimension>*; |
border[radius-l:8px] |
| border[radius-tl:<dimension>] |
border-top-left-radius: *<dimension>*; |
border[radius-tl:8px] |
| border[radius-tr:<dimension>] |
border-top-right-radius: *<dimension>*; |
border[radius-tr:8px] |
| border[radius-br:<dimension>] |
border-bottom-right-radius: *<dimension>*; |
border[radius-br:8px] |
| border[radius-bl:<dimension>] |
border-bottom-left-radius: *<dimension>*; |
border[radius-bl:8px] |
border-width
| Class |
Style |
Example |
| border[0] |
border-width: 0; |
|
| border[<dimension>] |
border-width: *<dimension>*; |
border[2px] |
| border[<var>] |
border-width: *<var>*; |
border[--my-width] |
| border[t:<dimension>] |
border-top-width: *<dimension>*; |
border[t:2px] |
| border[r:<dimension>] |
border-right-width: *<dimension>*; |
border[r:2px] |
| border[b:<dimension>] |
border-bottom-width: *<dimension>*; |
border[b:2px] |
| border[l:<dimension>] |
border-left-width: *<dimension>*; |
border[l:2px] |
| border[x:<dimension>] |
border-inline-width: *<dimension>*; |
border[x:2px] |
| border[y:<dimension>] |
border-block-width: *<dimension>*; |
border[y:2px] |
| border[s:<dimension>] |
border-inline-start-width: *<dimension>*; |
border[s:2px] |
| border[e:<dimension>] |
border-inline-end-width: *<dimension>*; |
border[e:2px] |
border-color
| Class |
Style |
Example |
| border[color:transparent] |
border-color: transparent; |
|
| border[color:current] |
border-color: currentColor; |
|
| border[color:<hex>] |
border-color: *<hex>*; |
border[color:#000000] |
| border[color:<color-function>] |
border-color: *<color-function>*; |
border[color:oklch(50%_0.1_180)] |
| border[color:<var>] |
border-color: *<var>*; |
border[color:--my-color] |
border-style
| Class |
Style |
Example |
| border[style:solid] |
border-style: solid; |
|
| border[style:dashed] |
border-style: dashed; |
|
| border[style:dotted] |
border-style: dotted; |
|
| border[style:double] |
border-style: double; |
|
| border[style:hidden] |
border-style: hidden; |
|
| border[style:none] |
border-style: none; |
|
border-divide
| Class |
Style |
Example |
| border[divide-x] |
border-inline-start-width: 0px; border-inline-end-width: 1px; (on child elements) |
|
| border[divide-x:<dimension>] |
border-inline-start-width: 0px; border-inline-end-width: *<dimension>*; |
border[divide-x:2px] |
| border[divide-y] |
border-top-width: 0px; border-bottom-width: 1px; (on child elements) |
|
| border[divide-y:<dimension>] |
border-top-width: 0px; border-bottom-width: *<dimension>*; |
border[divide-y:2px] |
| border[divide:solid] |
border-style: solid; (on child elements) |
|
| border[divide:dashed] |
border-style: dashed; (on child elements) |
|
outline
| Class |
Style |
Example |
| outline[0] |
outline-width: 0; |
|
| outline[<dimension>] |
outline-width: *<dimension>*; |
outline[2px] |
| outline[width:<dimension>] |
outline-width: *<dimension>*; |
outline[width:2px] |
| outline[color:transparent] |
outline-color: transparent; |
|
| outline[color:current] |
outline-color: currentColor; |
|
| outline[color:<hex>] |
outline-color: *<hex>*; |
outline[color:#000] |
| outline[color:<var>] |
outline-color: *<var>*; |
outline[color:--my-color] |
| outline[style:solid] |
outline-style: solid; |
|
| outline[style:dashed] |
outline-style: dashed; |
|
| outline[style:dotted] |
outline-style: dotted; |
|
| outline[style:double] |
outline-style: double; |
|
| outline[style:none] |
outline-style: none; |
|
| outline[offset:<var>] |
outline-offset: *<var>*; |
outline[offset:--my-offset] |
Effects
box-shadow
| Class |
Style |
Example |
| shadow[none] |
box-shadow: 0 0 #0000; |
|
| shadow[xs] |
box-shadow: var(--theme-shadow-xs); |
|
| shadow[sm] |
box-shadow: var(--theme-shadow-sm); |
|
| shadow[md] |
box-shadow: var(--theme-shadow-md); |
|
| shadow[lg] |
box-shadow: var(--theme-shadow-lg); |
|
| shadow[xl] |
box-shadow: var(--theme-shadow-xl); |
|
| shadow[<custom>] |
box-shadow: *<custom>*; |
shadow[0_2px_4px_#000] |
| shadow[<var>] |
box-shadow: *<var>*; |
shadow[--my-shadow] |
| shadow[color:<hex>] |
--uc-shadow-color: *<hex>*; |
shadow[color:#000] |
| shadow[color:<var>] |
--uc-shadow-color: *<var>*; |
shadow[color:--my-color] |
inset-shadow
| Class |
Style |
Example |
| inset-shadow[none] |
box-shadow: inset 0 0 #0000; |
|
| inset-shadow[xs] |
box-shadow: inset var(--theme-shadow-xs); |
|
| inset-shadow[sm] |
box-shadow: inset var(--theme-shadow-sm); |
|
| inset-shadow[<var>] |
box-shadow: inset *<var>*; |
inset-shadow[--my-shadow] |
ring
| Class |
Style |
Example |
| ring[<number>] |
box-shadow: 0 0 0 *<number>*px var(--uc-ring-color); |
ring[2] |
| ring[<var>] |
box-shadow: 0 0 0 *<var>* var(--uc-ring-color); |
ring[--my-ring] |
| ring[color:<hex>] |
--uc-ring-color: *<hex>*; |
ring[color:#000] |
| ring[color:<var>] |
--uc-ring-color: *<var>*; |
ring[color:--my-color] |
opacity
| Class |
Style |
Example |
| opacity[0] |
opacity: 0; |
|
| opacity[25] |
opacity: 0.25; |
|
| opacity[50] |
opacity: 0.5; |
|
| opacity[75] |
opacity: 0.75; |
|
| opacity[100] |
opacity: 1; |
|
| opacity[<number>] |
opacity: *<number>*; |
opacity[0.8] |
| opacity[<var>] |
opacity: *<var>*; |
opacity[--my-opacity] |
mix-blend-mode
| Class |
Style |
Example |
| mix-blend[normal] |
mix-blend-mode: normal; |
|
| mix-blend[multiply] |
mix-blend-mode: multiply; |
|
| mix-blend[screen] |
mix-blend-mode: screen; |
|
| mix-blend[overlay] |
mix-blend-mode: overlay; |
|
| mix-blend[darken] |
mix-blend-mode: darken; |
|
| mix-blend[lighten] |
mix-blend-mode: lighten; |
|
| mix-blend[color-dodge] |
mix-blend-mode: color-dodge; |
|
| mix-blend[color-burn] |
mix-blend-mode: color-burn; |
|
| mix-blend[hard-light] |
mix-blend-mode: hard-light; |
|
| mix-blend[soft-light] |
mix-blend-mode: soft-light; |
|
| mix-blend[difference] |
mix-blend-mode: difference; |
|
| mix-blend[exclusion] |
mix-blend-mode: exclusion; |
|
| mix-blend[hue] |
mix-blend-mode: hue; |
|
| mix-blend[saturation] |
mix-blend-mode: saturation; |
|
| mix-blend[color] |
mix-blend-mode: color; |
|
| mix-blend[luminosity] |
mix-blend-mode: luminosity; |
|
| mix-blend[plus-darker] |
mix-blend-mode: plus-darker; |
|
| mix-blend[plus-lighter] |
mix-blend-mode: plus-lighter; |
|
background-blend-mode
| Class |
Style |
Example |
| bg-blend[normal] |
background-blend-mode: normal; |
|
| bg-blend[multiply] |
background-blend-mode: multiply; |
|
| bg-blend[screen] |
background-blend-mode: screen; |
|
| bg-blend[overlay] |
background-blend-mode: overlay; |
|
| bg-blend[darken] |
background-blend-mode: darken; |
|
| bg-blend[lighten] |
background-blend-mode: lighten; |
|
| bg-blend[color-dodge] |
background-blend-mode: color-dodge; |
|
| bg-blend[color-burn] |
background-blend-mode: color-burn; |
|
| bg-blend[hard-light] |
background-blend-mode: hard-light; |
|
| bg-blend[soft-light] |
background-blend-mode: soft-light; |
|
| bg-blend[difference] |
background-blend-mode: difference; |
|
| bg-blend[exclusion] |
background-blend-mode: exclusion; |
|
| bg-blend[hue] |
background-blend-mode: hue; |
|
| bg-blend[saturation] |
background-blend-mode: saturation; |
|
| bg-blend[color] |
background-blend-mode: color; |
|
| bg-blend[luminosity] |
background-blend-mode: luminosity; |
|
| bg-blend[plus-darker] |
background-blend-mode: plus-darker; |
|
| bg-blend[plus-lighter] |
background-blend-mode: plus-lighter; |
|
mask-clip
| Class |
Style |
Example |
| mask[clip:border] |
mask-clip: border-box; |
|
| mask[clip:padding] |
mask-clip: padding-box; |
|
| mask[clip:content] |
mask-clip: content-box; |
|
| mask[clip:fill] |
mask-clip: fill-box; |
|
| mask[clip:stroke] |
mask-clip: stroke-box; |
|
| mask[clip:view] |
mask-clip: view-box; |
|
| mask[clip:no-clip] |
mask-clip: no-clip; |
|
mask-composite
| Class |
Style |
Example |
| mask[composite:add] |
mask-composite: add; |
|
| mask[composite:subtract] |
mask-composite: subtract; |
|
| mask[composite:intersect] |
mask-composite: intersect; |
|
| mask[composite:exclude] |
mask-composite: exclude; |
|
mask-image
| Class |
Style |
Example |
| mask[image:<url>] |
mask-image: *<url>*; |
mask[image:url(mask.png)] |
| mask[image:<var>] |
mask-image: *<var>*; |
mask[image:--my-mask] |
mask-mode
| Class |
Style |
Example |
| mask[mode:alpha] |
mask-mode: alpha; |
|
| mask[mode:luminance] |
mask-mode: luminance; |
|
| mask[mode:match-source] |
mask-mode: match-source; |
|
mask-position
| Class |
Style |
Example |
| mask[position:top] |
mask-position: top; |
|
| mask[position:right] |
mask-position: right; |
|
| mask[position:bottom] |
mask-position: bottom; |
|
| mask[position:left] |
mask-position: left; |
|
| mask[position:center] |
mask-position: center; |
|
| mask[position:top-left] |
mask-position: top left; |
|
| mask[position:top-right] |
mask-position: top right; |
|
| mask[position:bottom-left] |
mask-position: bottom left; |
|
| mask[position:bottom-right] |
mask-position: bottom right; |
|
| mask[position:<var>] |
mask-position: *<var>*; |
mask[position:--my-position] |
mask-repeat
| Class |
Style |
Example |
| mask[repeat:repeat] |
mask-repeat: repeat; |
|
| mask[repeat:no-repeat] |
mask-repeat: no-repeat; |
|
| mask[repeat:space] |
mask-repeat: space; |
|
| mask[repeat:round] |
mask-repeat: round; |
|
| mask[repeat:x] |
mask-repeat: repeat-x; |
|
| mask[repeat:y] |
mask-repeat: repeat-y; |
|
mask-size
| Class |
Style |
Example |
| mask[size:auto] |
mask-size: auto; |
|
| mask[size:cover] |
mask-size: cover; |
|
| mask[size:contain] |
mask-size: contain; |
|
| mask[size:<custom>] |
mask-size: *<custom>*; |
mask[size:100px_auto] |
| mask[size:<var>] |
mask-size: *<var>*; |
mask[size:--my-size] |
mask-type
| Class |
Style |
Example |
| mask[type:alpha] |
mask-type: alpha; |
|
| mask[type:luminance] |
mask-type: luminance; |
|
Filters
Filters are composable — multiple filter utilities can be combined on the same element. Each utility sets a CSS custom property and the combined filter property is updated automatically.
blur
| Class |
Style |
Example |
| blur[<px>] |
--uc-blur: blur(*<px>*); filter: ...; |
blur[4px] |
| blur[sm] |
--uc-blur: blur(var(--theme-blur-sm)); filter: ...; |
|
| blur[md] |
--uc-blur: blur(var(--theme-blur-md)); filter: ...; |
|
| blur[lg] |
--uc-blur: blur(var(--theme-blur-lg)); filter: ...; |
|
| blur[<var>] |
--uc-blur: blur(*<var>*); filter: ...; |
blur[--my-blur] |
brightness
| Class |
Style |
Example |
| brightness[<%>] |
--uc-brightness: brightness(*<%>*); filter: ...; |
brightness[150%] |
| brightness[<var>] |
--uc-brightness: brightness(*<var>*); filter: ...; |
brightness[--my-brightness] |
contrast
| Class |
Style |
Example |
| contrast[<%>] |
--uc-contrast: contrast(*<%>*); filter: ...; |
contrast[200%] |
| contrast[<var>] |
--uc-contrast: contrast(*<var>*); filter: ...; |
contrast[--my-contrast] |
grayscale
| Class |
Style |
Example |
| grayscale[<%>] |
--uc-grayscale: grayscale(*<%>*); filter: ...; |
grayscale[100%] |
| grayscale[<var>] |
--uc-grayscale: grayscale(*<var>*); filter: ...; |
grayscale[--my-grayscale] |
hue-rotate
| Class |
Style |
Example |
| hue-rotate[<angle>] |
--uc-hue-rotate: hue-rotate(*<angle>*); filter: ...; |
hue-rotate[180deg] |
| hue-rotate[<var>] |
--uc-hue-rotate: hue-rotate(*<var>*); filter: ...; |
hue-rotate[--my-hue] |
invert
| Class |
Style |
Example |
| invert[<%>] |
--uc-invert: invert(*<%>*); filter: ...; |
invert[100%] |
| invert[<var>] |
--uc-invert: invert(*<var>*); filter: ...; |
invert[--my-invert] |
saturate
| Class |
Style |
Example |
| saturate[<%>] |
--uc-saturate: saturate(*<%>*); filter: ...; |
saturate[50%] |
| saturate[<var>] |
--uc-saturate: saturate(*<var>*); filter: ...; |
saturate[--my-saturate] |
sepia
| Class |
Style |
Example |
| sepia[<%>] |
--uc-sepia: sepia(*<%>*); filter: ...; |
sepia[100%] |
| sepia[<var>] |
--uc-sepia: sepia(*<var>*); filter: ...; |
sepia[--my-sepia] |
drop-shadow
| Class |
Style |
Example |
| drop-shadow[none] |
--uc-drop-shadow: drop-shadow(0 0 #0000); filter: ...; |
|
| drop-shadow[xs] |
--uc-drop-shadow-length: var(--theme-drop-shadow-xs); filter: ...; |
|
| drop-shadow[sm] |
--uc-drop-shadow-length: var(--theme-drop-shadow-sm); filter: ...; |
|
| drop-shadow[md] |
--uc-drop-shadow-length: var(--theme-drop-shadow-md); filter: ...; |
|
| drop-shadow[lg] |
--uc-drop-shadow-length: var(--theme-drop-shadow-lg); filter: ...; |
|
| drop-shadow[xl] |
--uc-drop-shadow-length: var(--theme-drop-shadow-xl); filter: ...; |
|
| drop-shadow[<var>] |
--uc-drop-shadow-length: *<var>*; filter: ...; |
drop-shadow[--my-shadow] |
| drop-shadow[color:<hex>] |
--uc-drop-shadow-color: *<hex>*; |
drop-shadow[color:#000] |
| drop-shadow[color:<var>] |
--uc-drop-shadow-color: *<var>*; |
drop-shadow[color:--my-color] |
backdrop
Backdrop filter utilities work the same as their filter counterparts but apply to backdrop-filter instead.
| Class |
Style |
Example |
| backdrop[blur:<px>] |
--uc-blur: blur(*<px>*); backdrop-filter: ...; |
backdrop[blur:4px] |
| backdrop[blur:sm] |
--uc-blur: blur(var(--theme-blur-sm)); backdrop-filter: ...; |
|
| backdrop[brightness:<%>] |
--uc-brightness: brightness(*<%>*); backdrop-filter: ...; |
backdrop[brightness:150%] |
| backdrop[contrast:<%>] |
--uc-contrast: contrast(*<%>*); backdrop-filter: ...; |
backdrop[contrast:200%] |
| backdrop[grayscale:<%>] |
--uc-grayscale: grayscale(*<%>*); backdrop-filter: ...; |
backdrop[grayscale:100%] |
| backdrop[hue-rotate:<angle>] |
--uc-hue-rotate: hue-rotate(*<angle>*); backdrop-filter: ...; |
backdrop[hue-rotate:180deg] |
| backdrop[invert:<%>] |
--uc-invert: invert(*<%>*); backdrop-filter: ...; |
backdrop[invert:100%] |
| backdrop[saturate:<%>] |
--uc-saturate: saturate(*<%>*); backdrop-filter: ...; |
backdrop[saturate:50%] |
| backdrop[sepia:<%>] |
--uc-sepia: sepia(*<%>*); backdrop-filter: ...; |
backdrop[sepia:100%] |
Transition
transition
| Class |
Style |
Example |
| transition[all] |
transition-property: all; transition-timing-function: ...; transition-duration: ...; |
|
| transition[colors] |
transition-property: color, background-color, ...; transition-timing-function: ...; transition-duration: ...; |
|
| transition[opacity] |
transition-property: opacity; transition-timing-function: ...; transition-duration: ...; |
|
| transition[shadow] |
transition-property: box-shadow; transition-timing-function: ...; transition-duration: ...; |
|
| transition[transform] |
transition-property: transform, translate, scale, rotate; transition-timing-function: ...; transition-duration: ...; |
|
| transition[none] |
transition-property: none; transition-timing-function: ...; transition-duration: ...; |
|
| transition[normal] |
transition-behavior: normal; |
|
| transition[discrete] |
transition-behavior: allow-discrete; |
|
| transition[linear] |
transition-timing-function: linear; |
|
| transition[ease-in] |
transition-timing-function: var(--ease-in); |
|
| transition[ease-out] |
transition-timing-function: var(--ease-out); |
|
| transition[ease-in-out] |
transition-timing-function: var(--ease-in-out); |
|
| transition[duration:<time>] |
transition-duration: *<time>*; |
transition[duration:300ms] |
| transition[duration:<number>] |
transition-duration: *<number>*ms; |
transition[duration:300] |
| transition[duration:initial] |
transition-duration: initial; |
|
| transition[delay:<time>] |
transition-delay: *<time>*; |
transition[delay:100ms] |
| transition[delay:<number>] |
transition-delay: *<number>*ms; |
transition[delay:100] |
| transition[timing:initial] |
transition-timing-function: initial; |
|
| transition[timing:<var>] |
transition-timing-function: *<var>*; |
transition[timing:--my-timing] |
| transition[timing:<custom>] |
transition-timing-function: *<custom>*; |
transition[timing:cubic-bezier(0.4,0,0.2,1)] |
animation
| Class |
Style |
Example |
| animate[none] |
animation: none; |
|
| animate[spin] |
animation: var(--animate-spin); |
registers @keyframes spin |
| animate[ping] |
animation: var(--animate-ping); |
registers @keyframes ping |
| animate[pulse] |
animation: var(--animate-pulse); |
registers @keyframes pulse |
| animate[bounce] |
animation: var(--animate-bounce); |
registers @keyframes bounce |
| animate[<var>] |
animation: *<var>*; |
animate[--my-animation] |
| animate[<custom>] |
animation: *<custom>*; |
animate[spin_1s_linear_infinite] |
Transform
backface-visibility
| Class |
Style |
Example |
| backface[hidden] |
backface-visibility: hidden; |
|
| backface[visible] |
backface-visibility: visible; |
|
perspective
| Class |
Style |
Example |
| perspective[none] |
perspective: none; |
|
| perspective[dramatic] |
perspective: var(--perspective-dramatic); |
(100px) |
| perspective[near] |
perspective: var(--perspective-near); |
(300px) |
| perspective[normal] |
perspective: var(--perspective-normal); |
(500px) |
| perspective[midrange] |
perspective: var(--perspective-midrange); |
(800px) |
| perspective[distant] |
perspective: var(--perspective-distant); |
(1200px) |
| perspective[<px>] |
perspective: *<px>*; |
perspective[500px] |
| perspective[<var>] |
perspective: *<var>*; |
perspective[--my-perspective] |
| perspective[origin:center] |
perspective-origin: center; |
|
| perspective[origin:top] |
perspective-origin: top; |
|
| perspective[origin:right] |
perspective-origin: right; |
|
| perspective[origin:bottom] |
perspective-origin: bottom; |
|
| perspective[origin:left] |
perspective-origin: left; |
|
| perspective[origin:top-right] |
perspective-origin: top right; |
|
| perspective[origin:top-left] |
perspective-origin: top left; |
|
| perspective[origin:bottom-right] |
perspective-origin: bottom right; |
|
| perspective[origin:bottom-left] |
perspective-origin: bottom left; |
|
| perspective[origin:<var>] |
perspective-origin: *<var>*; |
perspective[origin:--my-origin] |
| perspective[origin:<custom>] |
perspective-origin: *<custom>*; |
perspective[origin:50%_50%] |
rotate
| Class |
Style |
Example |
| rotate[none] |
rotate: none; |
|
| rotate[<angle>] |
rotate: *<angle>*; |
rotate[45deg] |
| rotate[<number>] |
rotate: *<number>*deg; |
rotate[45] |
| rotate[<var>] |
rotate: *<var>*; |
rotate[--my-rotate] |
| rotate[x:<angle>] |
--uc-rotate-x: rotateX(*<angle>*); transform: ...; |
rotate[x:45deg] |
| rotate[y:<angle>] |
--uc-rotate-y: rotateY(*<angle>*); transform: ...; |
rotate[y:30deg] |
| rotate[z:<angle>] |
--uc-rotate-z: rotateZ(*<angle>*); transform: ...; |
rotate[z:90deg] |
scale
| Class |
Style |
Example |
| scale[none] |
scale: none; |
|
| scale[<%>] |
scale: *<%>* *<%>*; |
scale[150%] |
| scale[<number>] |
scale: *<number>*% *<number>*%; |
scale[1.5] |
| scale[<var>] |
scale: *<var>*; |
scale[--my-scale] |
| scale[x:<%>] |
--uc-scale-x: *<%>*; scale: ...; |
scale[x:150%] |
| scale[y:<%>] |
--uc-scale-y: *<%>*; scale: ...; |
scale[y:50%] |
| scale[z:<%>] |
--uc-scale-z: *<%>*; scale: ...; |
scale[z:100%] |
skew
| Class |
Style |
Example |
| skew[<angle>] |
--uc-skew-x: skewX(*<angle>*); --uc-skew-y: skewY(*<angle>*); transform: ...; |
skew[10deg] |
| skew[<number>] |
--uc-skew-x: skewX(*<number>*deg); --uc-skew-y: skewY(*<number>*deg); transform: ...; |
skew[10] |
| skew[<var>] |
--uc-skew-x: skewX(*<var>*); --uc-skew-y: skewY(*<var>*); transform: ...; |
skew[--my-skew] |
| skew[x:<angle>] |
--uc-skew-x: skewX(*<angle>*); transform: ...; |
skew[x:10deg] |
| skew[y:<angle>] |
--uc-skew-y: skewY(*<angle>*); transform: ...; |
skew[y:5deg] |
transform
| Class |
Style |
Example |
| transform[none] |
transform: none; |
|
| transform[<var>] |
transform: *<var>*; |
transform[--my-transform] |
| transform[<custom>] |
transform: *<custom>*; |
transform[translateX(10px)] |
| transform[origin:center] |
transform-origin: center; |
|
| transform[origin:top] |
transform-origin: top; |
|
| transform[origin:right] |
transform-origin: right; |
|
| transform[origin:bottom] |
transform-origin: bottom; |
|
| transform[origin:left] |
transform-origin: left; |
|
| transform[origin:top-right] |
transform-origin: top right; |
|
| transform[origin:top-left] |
transform-origin: top left; |
|
| transform[origin:bottom-right] |
transform-origin: bottom right; |
|
| transform[origin:bottom-left] |
transform-origin: bottom left; |
|
| transform[origin:<var>] |
transform-origin: *<var>*; |
transform[origin:--my-origin] |
| transform[origin:<custom>] |
transform-origin: *<custom>*; |
transform[origin:50%_50%] |
| transform[style:flat] |
transform-origin: flat; |
|
| transform[style:3d] |
transform-origin: reserve-3d; |
|
translate
| Class |
Style |
Example |
| translate[<dimension>] |
translate: *<dimension>* *<dimension>*; |
translate[10px] |
| translate[full] |
translate: 100% 100%; |
|
| translate[<fraction>] |
translate: *<fraction>* *<fraction>*; |
translate[1/2] |
| translate[<var>] |
translate: *<var>*; |
translate[--my-translate] |
| translate[x:<dimension>] |
--uc-translate-x: *<dimension>*; translate: ...; |
translate[x:10px] |
| translate[x:full] |
--uc-translate-x: 100%; translate: ...; |
|
| translate[y:<dimension>] |
--uc-translate-y: *<dimension>*; translate: ...; |
translate[y:50%] |
| translate[z:<dimension>] |
--uc-translate-z: *<dimension>*; translate: ...; |
translate[z:0px] |
Interactivity
accent-color
| Class |
Style |
Example |
| accent[auto] |
accent-color: auto; |
|
| accent[<hex>] |
accent-color: *<hex>*; |
accent[#ff0000] |
| accent[<var>] |
accent-color: *<var>*; |
accent[--my-accent] |
appearance
| Class |
Style |
Example |
| appearance[none] |
appearance: none; |
|
| appearance[auto] |
appearance: auto; |
|
caret-color
| Class |
Style |
Example |
| caret[auto] |
caret-color: auto; |
|
| caret[<hex>] |
caret-color: *<hex>*; |
caret[#ff0000] |
| caret[<var>] |
caret-color: *<var>*; |
caret[--my-caret] |
color-scheme
| Class |
Style |
Example |
| scheme[normal] |
color-scheme: normal; |
|
| scheme[light] |
color-scheme: light; |
|
| scheme[dark] |
color-scheme: dark; |
|
| scheme[light-dark] |
color-scheme: light dark; |
|
| scheme[only-dark] |
color-scheme: only dark; |
|
| scheme[only-light] |
color-scheme: only light; |
|
cursor
| Class |
Style |
Example |
| cursor[pointer] |
cursor: pointer; |
|
| cursor[default] |
cursor: default; |
|
| cursor[move] |
cursor: move; |
|
| cursor[not-allowed] |
cursor: not-allowed; |
|
| cursor[grab] |
cursor: grab; |
|
| cursor[grabbing] |
cursor: grabbing; |
|
| cursor[none] |
cursor: none; |
|
| cursor[auto] |
cursor: auto; |
|
| cursor[<url>] |
cursor: *<url>*; |
cursor[url(cursor.png)] |
| cursor[<var>] |
cursor: *<var>*; |
cursor[--my-cursor] |
field-sizing
| Class |
Style |
Example |
| field-sizing[content] |
field-sizing: content; |
|
| field-sizing[fixed] |
field-sizing: fixed; |
|
pointer-events
| Class |
Style |
Example |
| pointer-events[auto] |
pointer-events: auto; |
|
| pointer-events[none] |
pointer-events: none; |
|
resize
| Class |
Style |
Example |
| resize[none] |
resize: none; |
|
| resize[both] |
resize: both; |
|
| resize[y] |
resize: vertical; |
|
| resize[x] |
resize: horizontal; |
|
scroll-behavior
| Class |
Style |
Example |
| scroll[auto] |
scroll-behavior: auto; |
|
| scroll[smooth] |
scroll-behavior: smooth; |
|
scroll-margin
| Class |
Style |
Example |
| scroll[m:<dimension>] |
scroll-margin: *<dimension>*; |
scroll[m:10px] |
| scroll[mx:<dimension>] |
scroll-margin-inline: *<dimension>*; |
scroll[mx:10px] |
| scroll[my:<dimension>] |
scroll-margin-block: *<dimension>*; |
scroll[my:10px] |
| scroll[ms:<dimension>] |
scroll-margin-inline-start: *<dimension>*; |
scroll[ms:10px] |
| scroll[me:<dimension>] |
scroll-margin-inline-end: *<dimension>*; |
scroll[me:10px] |
| scroll[mt:<dimension>] |
scroll-margin-top: *<dimension>*; |
scroll[mt:10px] |
| scroll[mr:<dimension>] |
scroll-margin-right: *<dimension>*; |
scroll[mr:10px] |
| scroll[mb:<dimension>] |
scroll-margin-bottom: *<dimension>*; |
scroll[mb:10px] |
| scroll[ml:<dimension>] |
scroll-margin-left: *<dimension>*; |
scroll[ml:10px] |
scroll-padding
| Class |
Style |
Example |
| scroll[p:<dimension>] |
scroll-padding: *<dimension>*; |
scroll[p:10px] |
| scroll[px:<dimension>] |
scroll-padding-inline: *<dimension>*; |
scroll[px:10px] |
| scroll[py:<dimension>] |
scroll-padding-block: *<dimension>*; |
scroll[py:10px] |
| scroll[ps:<dimension>] |
scroll-padding-inline-start: *<dimension>*; |
scroll[ps:10px] |
| scroll[pe:<dimension>] |
scroll-padding-inline-end: *<dimension>*; |
scroll[pe:10px] |
| scroll[pt:<dimension>] |
scroll-padding-top: *<dimension>*; |
scroll[pt:10px] |
| scroll[pr:<dimension>] |
scroll-padding-right: *<dimension>*; |
scroll[pr:10px] |
| scroll[pb:<dimension>] |
scroll-padding-bottom: *<dimension>*; |
scroll[pb:10px] |
| scroll[pl:<dimension>] |
scroll-padding-left: *<dimension>*; |
scroll[pl:10px] |
scroll-snap
| Class |
Style |
Example |
| snap[x] |
scroll-snap-type: x var(--uc-scroll-snap-strictness); |
|
| snap[y] |
scroll-snap-type: y var(--uc-scroll-snap-strictness); |
|
| snap[both] |
scroll-snap-type: both var(--uc-scroll-snap-strictness); |
|
| snap[none] |
scroll-snap-type: none; |
|
| snap[mandatory] |
--uc-scroll-snap-strictness: mandatory; |
|
| snap[proximity] |
--uc-scroll-snap-strictness: proximity; |
|
| snap[align:start] |
scroll-snap-align: start; |
|
| snap[align:end] |
scroll-snap-align: end; |
|
| snap[align:center] |
scroll-snap-align: center; |
|
| snap[align:none] |
scroll-snap-align: none; |
|
| snap[stop:normal] |
scroll-snap-stop: normal; |
|
| snap[stop:always] |
scroll-snap-stop: always; |
|
| snap[type:none] |
scroll-snap-type: none; |
|
| snap[type:mandatory] |
scroll-snap-type: mandatory; |
|
| snap[type:proximity] |
scroll-snap-type: proximity; |
|
| snap[type:x] |
scroll-snap-type: x var(--uc-scroll-snap-strictness); |
|
| snap[type:y] |
scroll-snap-type: y var(--uc-scroll-snap-strictness); |
|
| snap[type:both] |
scroll-snap-type: both var(--uc-scroll-snap-strictness); |
|
touch-action
| Class |
Style |
Example |
| touch[auto] |
touch-action: auto; |
|
| touch[none] |
touch-action: none; |
|
| touch[pan-x] |
touch-action: pan-x; |
|
| touch[pan-y] |
touch-action: pan-y; |
|
| touch[pan-left] |
touch-action: pan-left; |
|
| touch[pan-right] |
touch-action: pan-right; |
|
| touch[pan-up] |
touch-action: pan-up; |
|
| touch[pan-down] |
touch-action: pan-down; |
|
| touch[pinch-zoom] |
touch-action: pinch-zoom; |
|
| touch[manipulation] |
touch-action: manipulation; |
|
user-select
| Class |
Style |
Example |
| select[none] |
user-select: none; |
|
| select[text] |
user-select: text; |
|
| select[all] |
user-select: all; |
|
| select[auto] |
user-select: auto; |
|
will-change
| Class |
Style |
Example |
| will-change[auto] |
will-change: auto; |
|
| will-change[transform] |
will-change: transform; |
|
| will-change[contents] |
will-change: contents; |
|
| will-change[scroll] |
will-change: scroll-position; |
|
| will-change[inherit] |
will-change: inherit; |
|
| will-change[initial] |
will-change: initial; |
|
| will-change[revert] |
will-change: revert; |
|
| will-change[revert-layer] |
will-change: revert-layer; |
|
| will-change[unset] |
will-change: unset; |
|
| will-change[<var>] |
will-change: *<var>*; |
will-change[--my-change] |
| will-change[<custom>] |
will-change: *<custom>*; |
will-change[opacity,transform] |
SVG
fill
| Class |
Style |
Example |
| fill[none] |
fill: none; |
|
| fill[transparent] |
fill: transparent; |
|
| fill[current] |
fill: currentColor; |
|
| fill[<hex>] |
fill: *<hex>*; |
fill[#ff0000] |
| fill[<var>] |
fill: *<var>*; |
fill[--my-fill] |
stroke
| Class |
Style |
Example |
| stroke[none] |
stroke: none; |
|
| stroke[transparent] |
stroke: transparent; |
|
| stroke[current] |
stroke: currentColor; |
|
| stroke[<hex>] |
stroke: *<hex>*; |
stroke[#ff0000] |
| stroke[<var>] |
stroke: *<var>*; |
stroke[--my-stroke] |
| stroke[width:<number>] |
stroke-width: *<number>*; |
stroke[width:2] |
| stroke[width:0] |
stroke-width: 0; |
|
Accessibility
forced-color-adjust
| Class |
Style |
Example |
| forced-color-adjust[auto] |
forced-color-adjust: auto; |
|
| forced-color-adjust[none] |
forced-color-adjust: none; |
|
