Interactivity

Cursor and pointer-events utilities.

---

Cursor

Class	CSS
cursor-pointer	cursor: pointer
cursor-default	cursor: default
cursor-not-allowed	cursor: not-allowed

<div class="flex gap-3">
  <div class="cursor-pointer bg-primary p-3 rounded-md text-inverse">cursor-pointer (hover me)</div>
  <div class="cursor-default bg-surface-alt p-3 rounded-md border">cursor-default</div>
  <div class="cursor-not-allowed bg-surface-alt p-3 rounded-md border text-disabled">cursor-not-allowed</div>
</div>

cursor-pointer (hover me)

cursor-default

cursor-not-allowed

---

Pointer Events

Class	CSS
pointer-events-none	pointer-events: none
pointer-events-auto	pointer-events: auto

---

Responsive Variants

All interactivity classes support breakpoint prefixes: sm:, md:, lg:, xl:, 2xl:.

<div class="pointer-events-none md:pointer-events-auto">
  Non-interactive on mobile, interactive from md up
</div>