Pointer Events

Utilities for controlling whether an element responds to pointer events.

Class Properties
.pointer-events-none pointer-events: none;
.pointer-events-auto pointer-events: auto;

Usage

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.

Every element is clickable
None of these elements is clickable

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.