Pointer Events - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "pointer-events"; export const description = "Utilities for controlling whether an element responds to pointer events.";

Examples

Ignoring pointer events

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

<Figure hint="Click the search icons to see the expected behavior"> <Example> { <div className="grid grid-cols-1 gap-10 px-0 sm:grid-cols-2 sm:px-10"> <div className="flex flex-col"> <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">pointer-events-auto</p> <div className="relative w-full rounded-lg shadow-sm"> <div className="pointer-events-auto absolute inset-y-0 left-0 flex items-center pl-3"> <svg className="absolute h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"> <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" /> </svg> </div> <input type="text" placeholder="Search" className="dark:highlight-white/5 block w-full rounded-lg px-3 py-2 pl-10 font-sans text-sm text-gray-500 ring-1 ring-gray-900/10 dark:bg-gray-800 dark:text-gray-400 dark:ring-0" /> </div> </div> <div className="flex flex-col"> <p className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">pointer-events-none</p> <div className="relative w-full rounded-lg shadow-sm"> <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"> <svg className="absolute h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"> <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" /> </svg> </div> <input type="text" placeholder="Search" className="dark:highlight-white/5 block w-full rounded-lg px-3 py-2 pl-10 font-sans text-sm text-gray-500 ring-1 ring-gray-900/10 dark:bg-gray-800 dark:text-gray-400 dark:ring-0" /> </div> </div> </div> } </Example>

html

<!-- [!code classes:pointer-events-none,pointer-events-auto] -->
<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>

</Figure>

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

Restoring pointer events

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

html

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