Cursor

Controls the cursor style when hovering over an element.

Class	Properties
c-auto	cursor: auto
c-cr	cursor: col-resize
c-ch	cursor: crosshair
c-d	cursor: default
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-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-w	cursor: wait
c-wr	cursor: w-resize
c-zi	cursor: zoom-in
c-zo	cursor: zoom-out

---

Using breakpoints

Using responsive breakpoints like sm:c-*, md:c-*, lg:c-*, and xxl:c-* allows targeting specific utilities in different viewports.

<div class="c-p md:c-wait ..."></div>

Using variants

Using :hover variants such as h:c-* allows you to override elements and change their values when hovering over them.

<div class="c-p h:c-wait ..."></div>