Interactions
Utility classes that control how elements interact (or don't) with the user — touch, pointer, selection, resize, appearance, and cursor.
Text selection
Change the way in which the content is selected when the user interacts with it.
This paragraph will be entirely selected when clicked.
This paragraph has default select behavior.
This paragraph will not be selectable.
<p class="user-select-all">Entirely selected.</p>
<p class="user-select-auto">Default behavior.</p>
<p class="user-select-none">Not selectable.</p>Pointer events
Use .pointer-events-none to disable pointer interactions, and .pointer-events-auto to re-enable.
<a href="#" class="pointer-events-none">Not clickable</a>Touch actions
Control browser touch behaviors like scrolling and pinch-zooming:
| Class | Effect |
|---|---|
.touch-auto | Default browser touch behavior |
.touch-none | All touch scrolling/zooming disabled |
.touch-pan-x | Pan horizontally only |
.touch-pan-y | Pan vertically only |
.touch-manipulation | Pan & pinch; disables double-tap zoom (also removes 300ms click delay) |
<!-- recommended for buttons on touch -->
<button class="touch-manipulation">Tap without double-tap zoom</button>Cursor
Set the cursor to any CSS value with .cursor-{value}: .cursor-pointer, .cursor-not-allowed, .cursor-grab, .cursor-zoom-in, .cursor-move, .cursor-text, etc.
Appearance & resize
Use .appearance-none to reset native form control appearance, and .resize-* to control resize: .resize-none, .resize-x, .resize-y, .resize (both).