Utilities
Interactivity
Cursor, pointer events, user select, resize, scroll behavior, scroll snap, touch action and accent colors.
58classes
3variant classes
15properties
Live example
<div class="space-y-3">
<div class="flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2">
<div class="snap-start shrink-0 w-40 h-20 rounded-xl bg-primary"></div><div class="snap-start shrink-0 w-40 h-20 rounded-xl bg-accent"></div><div class="snap-start shrink-0 w-40 h-20 rounded-xl bg-surface-3"></div><div class="snap-start shrink-0 w-40 h-20 rounded-xl bg-primary"></div>
</div>
<div class="flex flex-wrap gap-3 text-sm"><span class="rounded border px-3 py-1 cursor-pointer">cursor-pointer</span><span class="rounded border px-3 py-1 cursor-not-allowed">cursor-not-allowed</span><span class="rounded border px-3 py-1 select-all">select-all text</span><label class="flex items-center gap-2"><input type="checkbox" class="accent-primary size-4" checked> accent-primary</label></div>
</div>Variant support
Variants are generated where they are useful, which keeps the whole stylesheet small enough to link from a CDN. Prefix a class with one of these to apply it in that state or above that width, for example disabled:cursor-default. Stacked variants such as dark:hover: are not part of the prebuilt file; arbitrary values take any variant, stacked, with the optional script or the purge CLI.
| Kind | Prefixes | Classes in this category |
|---|---|---|
| State | disabled: | 3 |
| Group and peer | not generated | 0 |
| Structure | not generated | 0 |
| Motion | not generated | 0 |
| Scheme | not generated | 0 |
| Breakpoints | not generated | 0 |
| Containers | not generated | 0 |
| Media and direction | not generated | 0 |
Cursor 18
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
cursor-auto | cursor: auto; | |
cursor-default | cursor: default; | disabled |
cursor-pointer | cursor: pointer; | |
cursor-wait | cursor: wait; | |
cursor-text | cursor: text; | |
cursor-move | cursor: move; | |
cursor-help | cursor: help; | |
cursor-not-allowed | cursor: not-allowed; | disabled |
cursor-none | cursor: none; | |
cursor-progress | cursor: progress; | |
cursor-cell | cursor: cell; | |
cursor-crosshair | cursor: crosshair; | |
cursor-grab | cursor: grab; | |
cursor-grabbing | cursor: grabbing; | |
cursor-zoom-in | cursor: zoom-in; | |
cursor-zoom-out | cursor: zoom-out; | |
cursor-col-resize | cursor: col-resize; | |
cursor-row-resize | cursor: row-resize; |
Pointer events 2
Variants: listed per class
| Class | CSS | Variants |
|---|---|---|
pointer-events-none | pointer-events: none; | disabled |
pointer-events-auto | pointer-events: auto; |
User select 4
Variants: none
| Class | CSS |
|---|---|
select-none | -webkit-user-select: none; user-select: none; |
select-text | -webkit-user-select: text; user-select: text; |
select-all | -webkit-user-select: all; user-select: all; |
select-auto | -webkit-user-select: auto; user-select: auto; |
Resize 4
Variants: none
| Class | CSS |
|---|---|
resize-none | resize: none; |
resize | resize: both; |
resize-x | resize: horizontal; |
resize-y | resize: vertical; |
Appearance 2
Variants: none
| Class | CSS |
|---|---|
appearance-none | appearance: none; |
appearance-auto | appearance: auto; |
Scroll behavior 2
Variants: none
| Class | CSS |
|---|---|
scroll-auto | scroll-behavior: auto; |
scroll-smooth | scroll-behavior: smooth; |
Scroll margin top 5
Variants: none
| Class | CSS |
|---|---|
scroll-mt-0 | scroll-margin-top: 0; |
scroll-mt-2 | scroll-margin-top: 0.5rem; |
scroll-mt-4 | scroll-margin-top: 1rem; |
scroll-mt-8 | scroll-margin-top: 2rem; |
scroll-mt-16 | scroll-margin-top: 4rem; |
Scroll snap type 3
Variants: none
| Class | CSS |
|---|---|
snap-none | scroll-snap-type: none; |
snap-x | scroll-snap-type: x var(--m-snap, proximity); |
snap-y | scroll-snap-type: y var(--m-snap, proximity); |
Scroll snap strictness 2
Variants: none
| Class | CSS |
|---|---|
snap-mandatory | --m-snap: mandatory; |
snap-proximity | --m-snap: proximity; |
Scroll snap align 3
Variants: none
| Class | CSS |
|---|---|
snap-start | scroll-snap-align: start; |
snap-end | scroll-snap-align: end; |
snap-center | scroll-snap-align: center; |
Scroll snap stop 1
Variants: none
| Class | CSS |
|---|---|
snap-always | scroll-snap-stop: always; |
Touch action 5
Variants: none
| Class | CSS |
|---|---|
touch-auto | touch-action: auto; |
touch-none | touch-action: none; |
touch-manipulation | touch-action: manipulation; |
touch-pan-x | touch-action: pan-x; |
touch-pan-y | touch-action: pan-y; |
Will change 3
Variants: none
| Class | CSS |
|---|---|
will-change-auto | will-change: auto; |
will-change-transform | will-change: transform; |
will-change-opacity | will-change: opacity; |
Caret color 2
Variants: none
| Class | CSS |
|---|---|
caret-transparent | caret-color: transparent; |
caret-primary | caret-color: var(--primary); |
Accent color 2
Variants: none
| Class | CSS |
|---|---|
accent-primary | accent-color: var(--primary); |
accent-auto | accent-color: auto; |