Interactivity

Interactivity

Make elements respond to user actions.

Cursor

cursor-<type>:

<button class="cursor-pointer">Click me</button>
<div class="cursor-not-allowed">Disabled</div>
<div class="cursor-wait">Loading</div>

• cursor-pointer, cursor-wait, cursor-text, cursor-move, cursor-help, cursor-not-allowed, cursor-none, cursor-default, cursor-grab, cursor-zoom-in, cursor-zoom-out.
• Custom: cursor-[url(...),pointer].

User select

• select-none, select-text, select-all, select-auto.
• selection:bg-sky-500 styles text when selected.

<p class="select-none">Can't select this</p>

Pointer events

• pointer-events-none, pointer-events-auto.

<div class="pointer-events-none">Ignores clicks</div>

Scroll snap

• snap-x, snap-y, snap-mandatory, snap-proximity, snap-start, snap-center, snap-end, snap-align-none, snap-normal, snap-always.

Scroll behavior & margin

• scroll-auto, scroll-smooth.
• scroll-mt-24 (scroll-margin-top), scroll-ms-4, scroll-p-6 (scroll-padding), etc.

Appearance & resize

• appearance-none removes native styling.
• resize, resize-x, resize-y, resize-none.

TL;DR

• cursor-pointer makes elements clickable-looking.
• select-none blocks text selection.
• scroll-smooth enables smooth anchor scrolling.
• appearance-none strips native form styling.