Interactivity

Pointer Events

Utilities for controlling whether an element responds to pointer events.

Quick reference

Class	Description
pointer-events-auto	pointer-events: auto
pointer-events-none	pointer-events: none
pointer-events-inherit	pointer-events: inherit
pointer-events-initial	pointer-events: initial
pointer-events-revert	pointer-events: revert
pointer-events-revert-layer	pointer-events: revert-layer
pointer-events-unset	pointer-events: unset

Basic usage

Controlling pointer event behavior

Use pointer-events-auto to revert to the default browser behavior for pointer events (like :hover and click).

Use pointer-events-none to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are “beneath” the target.

pointer-events-auto

Clicking the search icon will not trigger focus on the input.

pointer-events-none

Clicking the search icon will trigger focus on the input.

<div class="...">
  <div class="pointer-events-auto ...">
    <svg>...</svg>
  </div>
  <input type="text" placeholder="Search" class="...">
</div>

<div class="...">
  <div class="pointer-events-none ...">
    <svg>...</svg>
  </div>
  <input type="text" placeholder="Search" class="...">
</div>

Applying conditionally

Hover, focus, and other states

Warp lets you conditionally apply utility classes in different states using variant modifiers. For example, use focus:pointer-events-auto to only apply the pointer-events-auto utility on focus.

<div class="pointer-events-none focus:pointer-events-auto"></div>

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:pointer-events-auto to apply the pointer-events-auto utility at only medium screen sizes and above.

<div class="pointer-events-none md:pointer-events-auto"></div>