cursor-pointer/default/not-allowed/wait/text/move/grab/zoom-in and 30+ more cursor utilities. This family contains 36 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
cursor-autocursor: auto;
cursor-defaultcursor: default;
cursor-pointercursor: pointer;
cursor-waitcursor: wait;
cursor-textcursor: text;
cursor-movecursor: move;
cursor-helpcursor: help;
cursor-not-allowedcursor: not-allowed;
cursor-nonecursor: none;
cursor-context-menucursor: context-menu;
cursor-progresscursor: progress;
cursor-cellcursor: cell;
cursor-crosshaircursor: crosshair;
cursor-vertical-textcursor: vertical-text;
cursor-aliascursor: alias;
cursor-copycursor: copy;
cursor-no-dropcursor: no-drop;
cursor-grabcursor: grab;
cursor-grabbingcursor: grabbing;
cursor-all-scrollcursor: all-scroll;
cursor-col-resizecursor: col-resize;
cursor-row-resizecursor: row-resize;
cursor-n-resizecursor: n-resize;
cursor-e-resizecursor: e-resize;
cursor-s-resizecursor: s-resize;
cursor-w-resizecursor: w-resize;
cursor-ne-resizecursor: ne-resize;
cursor-nw-resizecursor: nw-resize;
cursor-se-resizecursor: se-resize;
cursor-sw-resizecursor: sw-resize;
cursor-ew-resizecursor: ew-resize;
cursor-ns-resizecursor: ns-resize;
cursor-nesw-resizecursor: nesw-resize;
cursor-nwse-resizecursor: nwse-resize;
cursor-zoom-incursor: zoom-in;
cursor-zoom-outcursor: zoom-out;

Example#

example
html
<button class="cursor-pointer">Affordance</button>
<div class="cursor-not-allowed opacity-50">Locked</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • cursor-pointer on any clickable without native semantics
  • grab + active:grabbing for drag handles

utilities/interactivity/cursor|Cursor · utilities/interactivity/scroll-snap|Scroll snap