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;