Cursor

Set the cursor style when hovering over an element.

Limited availability

This feature does not work in some of the most widely-used browsers.

Chrome
Edge
Firefox
SafariDesktop only

c-a
cursor: alias;
c-as
cursor: all-scroll;
c-auto
cursor: auto;
c-c
cursor: cell;
c-ch
cursor: crosshair;
c-cm
cursor: context-menu;
c-co
cursor: copy;
c-cr
cursor: col-resize;
c-d
cursor: default;
c-er
cursor: ew-resize;
c-g
cursor: grab;
c-gr
cursor: grabbing;
c-h
cursor: help;
c-m
cursor: move;
c-na
cursor: not-allowed;
c-ner
cursor: ne-resize;
c-neswr
cursor: nesw-resize;
c-none
cursor: none;
c-nr
cursor: n-resize;
c-nsr
cursor: ns-resize;
c-nwr
cursor: nw-resize;
c-nwser
cursor: nwse-resize;
c-p
cursor: pointer;
c-pr
cursor: progress;
c-rs
cursor: row-resize;
c-ser
cursor: se-resize;
c-sr
cursor: s-resize;
c-swr
cursor: sw-resize;
c-t
cursor: text;
c-vt
cursor: vertical-text;
c-w
cursor: wait;
c-wr
cursor: w-resize;
c-zi
cursor: zoom-in;
c-zo
cursor: zoom-out;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:c-(value)
Small≥640px
md:c-(value)
Medium≥768px
lg:c-(value)
Large≥1024px
xxl:c-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:c-(value)