Utilities
Behavior
Generated from the registry, so this page can't drift from the compiler.
pointer-events
Sets whether an element reacts to the mouse.
Syntax
pointer-events(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | auto none |
Examples and generated CSS
pointer-events(none)
disabled:pointer-events(none).pointer-events\(none\) {
pointer-events: none;
}
.disabled\:pointer-events\(none\):disabled {
pointer-events: none;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:pointer-events(none)
hover:pointer-events(none)
lg:focus:pointer-events(none)user-select
Sets whether text can be selected.
Syntax
user-select(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | auto none text all |
Examples and generated CSS
user-select(none)
user-select(all).user-select\(all\) {
user-select: all;
}
.user-select\(none\) {
user-select: none;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:user-select(none)
hover:user-select(none)
lg:focus:user-select(none)resize
Sets whether the visitor can resize an element.
Syntax
resize(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none both x y |
Examples and generated CSS
resize(none)
resize(y).resize\(none\) {
resize: none;
}
.resize\(y\) {
resize: vertical;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:resize(none)
hover:resize(none)
lg:focus:resize(none)appearance
Removes a form control's native styling.
Syntax
appearance(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none auto |
Examples and generated CSS
appearance(none).appearance\(none\) {
appearance: none;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:appearance(none)
hover:appearance(none)
lg:focus:appearance(none)accent-color
Sets the color of checkboxes, radio buttons and other native controls.
Syntax
accent-color(value)
accent-color[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
accent-color(brand)
accent-color[#ff00aa].accent-color\(brand\) {
accent-color: var(--croff-color-brand);
}
.accent-color\[\#ff00aa\] {
accent-color: #ff00aa;
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:accent-color(brand)
hover:accent-color(brand)
lg:focus:accent-color(brand)caret-color
Sets the color of the text cursor.
Syntax
caret-color(value)
caret-color[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | colors token | brand brand-dark dark light muted white black gray-100 gray-200 gray-300 gray-400 gray-500 gray-600 gray-700 gray-800 gray-900 red amber green blue |
| keyword | transparent current inherit | |
| var(--name) | See type | |
| alpha(color,0–100) | See type |
Examples and generated CSS
caret-color(brand)
caret-color[#ff00aa].caret-color\(brand\) {
caret-color: var(--croff-color-brand);
}
.caret-color\[\#ff00aa\] {
caret-color: #ff00aa;
}Theme behavior
Reads tokens from colors. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:caret-color(brand)
hover:caret-color(brand)
lg:focus:caret-color(brand)scroll-behavior
Sets whether scrolling to an anchor is animated.
Syntax
scroll-behavior(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | auto smooth |
Examples and generated CSS
scroll-behavior(smooth)
motion-reduce:scroll-behavior(auto).scroll-behavior\(smooth\) {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
.motion-reduce\:scroll-behavior\(auto\) {
scroll-behavior: auto;
}
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:scroll-behavior(smooth)
hover:scroll-behavior(smooth)
lg:focus:scroll-behavior(smooth)touch-action
Sets which touch gestures the browser handles.
Syntax
touch-action(value)
touch-action[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | auto none manipulation pan-x pan-y pinch-zoom |
Examples and generated CSS
touch-action(manipulation)
touch-action[pan-x_pinch-zoom].touch-action\(manipulation\) {
touch-action: manipulation;
}
.touch-action\[pan-x_pinch-zoom\] {
touch-action: pan-x pinch-zoom;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:touch-action(manipulation)
hover:touch-action(manipulation)
lg:focus:touch-action(manipulation)scroll-snap-type
Makes a scroll container snap to its children.
Syntax
scroll-snap-type(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none x y both x-proximity y-proximity |
Examples and generated CSS
scroll-snap-type(x)
scroll-snap-type(y-proximity).scroll-snap-type\(x\) {
scroll-snap-type: x mandatory;
}
.scroll-snap-type\(y-proximity\) {
scroll-snap-type: y proximity;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:scroll-snap-type(x)
hover:scroll-snap-type(x)
lg:focus:scroll-snap-type(x)scroll-snap-align
Sets where a child snaps in its scroll container.
Syntax
scroll-snap-align(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | none start center end |
Examples and generated CSS
scroll-snap-align(start).scroll-snap-align\(start\) {
scroll-snap-align: start;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:scroll-snap-align(start)
hover:scroll-snap-align(start)
lg:focus:scroll-snap-align(start)