pointer-events

Utilities for controlling whether an element responds to pointer events.

Class	Styles
`pointer-events-auto`
`pointer-events: auto;`

| | pointer-events-none |

pointer-events: none;

Use the pointer-events-none utility to make an element ignore pointer events, like :hover and click events:

Click the search icons to see the expected behavior

pointer-events-auto

pointer-events-none

<div class="relative ...">  <div class="pointer-events-auto absolute ...">    <svg class="absolute h-5 w-5 text-gray-400">      <!-- ... -->    </svg>  </div>  <input type="text" placeholder="Search" class="..." /></div><div class="relative ...">  <div class="pointer-events-none absolute ...">    <svg class="absolute h-5 w-5 text-gray-400">      <!-- ... -->    </svg>  </div>  <input type="text" placeholder="Search" class="..." /></div>

The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.

Use the pointer-events-auto utility to revert to the default browser behavior for pointer events:

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

pointer-events

On this page