Tailwind CSS Interactivity

Tailwind's interactivity utilities give you fine-grained control over how users interact with elements on the page, from cursor styles and text selection behaviour to scroll control and native form appearance.

These utilities cover a range of CSS properties that are often overlooked but can have a significant impact on the feel and usability of an interface. Many of these are excellent candidates for pairing with state variants like hover:, focus:, and disabled:.

Cursor

You can use cursor-{type} to control the mouse cursor style when hovering over an element. This is one of the most frequently applied interactivity utilities, as it helps communicate affordances, whether something is clickable, draggable, or disabled.

Common cursor styles:

Utility	CSS Output	Best Use Case
`cursor-pointer`	`cursor: pointer;`	Buttons, links, and any clickable element.
`cursor-default`	`cursor: default;`	Resetting cursor to the browser default.
`cursor-not-allowed`	`cursor: not-allowed;`	Disabled buttons or restricted actions.
`cursor-wait`	`cursor: wait;`	Loading states while an async operation runs.
`cursor-grab` / `cursor-grabbing`	`cursor: grab;`	Draggable elements like carousels or kanban cards.
`cursor-text`	`cursor: text;`	Editable text areas or inline inputs.
`cursor-crosshair`	`cursor: crosshair;`	Drawing tools or image cropping interfaces.
`cursor-zoom-in` / `cursor-zoom-out`	`cursor: zoom-in;`	Image galleries or map zoom controls.

You can also use arbitrary values to specify any valid CSS cursor: cursor-[url('/my-cursor.png'),_auto]. And as you might expect, you can also use CSS variables like cursor-[var(--my-cursor)].

Pointer Events

The pointer-events utilities control whether an element can receive mouse or touch events at all. This is subtly different from just disabling a button because pointer-events-none makes an element completely "invisible" to the pointer, so events pass through to whatever is behind it.

Here are the pointer events utilities:

Utility	CSS Output	Description
`pointer-events-none`	`pointer-events: none;`	Element ignores all pointer events. Clicks pass through to elements underneath.
`pointer-events-auto`	`pointer-events: auto;`	Restores default pointer event handling (useful for resetting inside a `pointer-events-none` parent).

User Select

The select-{option} utilities control whether and how a user can select text within an element. This can be useful for preventing selection in UI controls, or for making it easy to copy a code snippet in one click.

Here are the user select utilities:

Utility	CSS Output	Description
`select-none`	`user-select: none;`	Prevents text selection. Useful for buttons and labels.
`select-text`	`user-select: text;`	Allows text selection (restores browser default).
`select-all`	`user-select: all;`	Selects all content in one click. Great for code snippets or API keys.
`select-auto`	`user-select: auto;`	Reverts to the browser's default selection behaviour.

Resize

The resize-{axis} utilities control whether a user can resize an element by dragging a handle, usually applied to textarea elements:

Utility	CSS Output	Description
`resize`	`resize: both;`	User can resize both horizontally and vertically.
`resize-x`	`resize: horizontal;`	User can only resize horizontally.
`resize-y`	`resize: vertical;`	User can only resize vertically (most common for textareas).
`resize-none`	`resize: none;`	Disables resizing entirely.

Overflow & Scroll Behavior

The overflow-{value} utilities control what happens when content exceeds an element's bounds. They map directly to the CSS overflow property. You can also combine them with scroll-smooth for a more polished feel when using anchor navigation.

Here's a breakdown of the overflow and scroll behavior utilities:

Category	Utilities	Description
Overflow	`overflow-hidden` `overflow-auto` `overflow-scroll` `overflow-visible` `overflow-clip`	Controls whether content is clipped, scrollable, or visible. Also composable with `overflow-x-` and `overflow-y-`.
Scroll Behaviour	`scroll-smooth` `scroll-auto`	Whether anchor link navigation animates smoothly or jumps instantly.
Scroll Snap	`snap-none` `snap-x` `snap-y` `snap-both` `snap-mandatory` `snap-proximity` `snap-start` `snap-end` `snap-center` `snap-align-none` `snap-normal` `snap-always`	Creates a scroll-snapping container and defines where items should snap to.
Overscroll	`overscroll-auto` `overscroll-contain` `overscroll-none`	Prevents scroll chaining and keeps momentum scrolling within the element. You can also use the `overscroll-x-` and `overscroll-y-` utilities to control the overscroll behavior for each axis independently.

Appearance & Accent Color

The following utilities control how native browser form controls look:

appearance-none: Strips the browser's default styling from a form element like select or input, giving you a blank canvas to restyle it completely. You can restore default browser styling by using the appearance-auto utility.
accent-{color}: Applies a theme color to native form controls like checkboxes, radio buttons, and range sliders without requiring appearance-none. This is a simpler alternative when you just want branded colours on native inputs. For example, accent-blue-600 or accent-(--brand-color):

Examples

Here are examples of some of the interactivity utilities in action:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Interactivity Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8 font-sans space-y-10">

<div class="bg-white rounded-2xl shadow-md p-6">
    <h2 class="text-lg font-bold text-slate-800 mb-1">Cursors</h2>
    <p class="text-sm text-slate-500 mb-4">Hover each box to see different cursor styles.</p>
    <div class="flex flex-wrap gap-3">
      <div class="cursor-pointer bg-blue-100 text-blue-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-pointer</div>
      <div class="cursor-wait bg-amber-100 text-amber-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-wait</div>
      <div class="cursor-not-allowed bg-red-100 text-red-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-not-allowed</div>
      <div class="cursor-grab bg-green-100 text-green-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-grab</div>
      <div class="cursor-crosshair bg-violet-100 text-violet-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-crosshair</div>
      <div class="cursor-text bg-slate-100 text-slate-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-text</div>
      <div class="cursor-zoom-in bg-cyan-100 text-cyan-800 px-4 py-2 rounded-lg text-sm font-mono">cursor-zoom-in</div>
    </div>
  </div>

<div class="bg-white rounded-2xl shadow-md p-6">
    <h2 class="text-lg font-bold text-slate-800 mb-1">User Select</h2>
    <p class="text-sm text-slate-500 mb-4">Try to select the text in each box.</p>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div class="select-none bg-slate-50 border border-dashed border-slate-300 rounded-xl p-4 text-center">
        <p class="text-xs font-mono text-slate-500 mb-1">select-none</p>
        <p class="font-medium">This text cannot be selected.</p>
      </div>
      <div class="select-text bg-slate-50 border border-dashed border-slate-300 rounded-xl p-4 text-center">
        <p class="text-xs font-mono text-slate-500 mb-1">select-text</p>
        <p class="font-medium">This text can be selected normally.</p>
      </div>
      <div class="select-all bg-slate-50 border border-dashed border-slate-300 rounded-xl p-4 text-center">
        <p class="text-xs font-mono text-slate-500 mb-1">select-all</p>
        <p class="font-medium">One click selects all of this text.</p>
      </div>
    </div>
  </div>

<div class="bg-white rounded-2xl shadow-md p-6">
    <h2 class="text-lg font-bold text-slate-800 mb-1">Pointer Events</h2>
    <p class="text-sm text-slate-500 mb-4">The second button has <code class="bg-slate-100 px-1 rounded text-xs">pointer-events-none</code>.</p>
    <div class="flex gap-4">
      <button class="bg-blue-600 text-white px-5 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors">Normal Button</button>
      <button class="pointer-events-none opacity-50 bg-blue-600 text-white px-5 py-2 rounded-lg font-medium">Disabled (pointer-events-none)</button>
    </div>
  </div>

<div class="bg-white rounded-2xl shadow-md p-6">
    <h2 class="text-lg font-bold text-slate-800 mb-1">Resize</h2>
    <p class="text-sm text-slate-500 mb-4">Drag the bottom-right corner of this textarea to resize it.</p>
    <textarea class="resize w-full border border-slate-300 rounded-lg p-3 text-sm text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3">This textarea is resizable in both directions using the `resize` utility.</textarea>
  </div>

<div class="bg-white rounded-2xl shadow-md p-6">
    <h2 class="text-lg font-bold text-slate-800 mb-1">Overflow &amp; Scroll</h2>
    <p class="text-sm text-slate-500 mb-4">The box below uses <code class="bg-slate-100 px-1 rounded text-xs">overflow-y-auto</code> with <code class="bg-slate-100 px-1 rounded text-xs">scroll-smooth</code>.</p>
    <div class="overflow-y-auto scroll-smooth max-h-36 border border-slate-200 rounded-xl p-4 space-y-2 text-sm text-slate-600">
      <p>Line 1 — scroll down to see more content below.</p>
      <p>Line 2 — still going...</p>
      <p>Line 3 — a bit further.</p>
      <p>Line 4 — keep scrolling.</p>
      <p>Line 5 — almost there.</p>
      <p>Line 6 — you made it!</p>
    </div>
  </div>

<div class="bg-white rounded-2xl shadow-md p-6">
    <h2 class="text-lg font-bold text-slate-800 mb-1">Accent Color</h2>
    <p class="text-sm text-slate-500 mb-4">Use <code class="bg-slate-100 px-1 rounded text-xs">accent-{color}</code> to theme native form controls.</p>
    <div class="flex flex-col gap-3">
      <label class="flex items-center gap-3">
        <input type="checkbox" checked class="accent-blue-600 w-5 h-5"> <span class="text-sm">accent-blue-600</span>
      </label>
      <label class="flex items-center gap-3">
        <input type="checkbox" checked class="accent-pink-500 w-5 h-5"> <span class="text-sm">accent-pink-500</span>
      </label>
      <label class="flex items-center gap-3">
        <input type="range" class="accent-emerald-500 w-48"> <span class="text-sm">accent-emerald-500 (range)</span>
      </label>
    </div>
  </div>

</body>
</html>

View Output

Next we'll look at how you can use plugins to extend Tailwind CSS.