Pointer events
The pointer events class sets the pointer-events property. It controls if an element responds to a mouse event, like clicking or hovering.
Overview | CSS Shortcut class | Applied style |
pointer-events-auto
| pointer-events: auto;
|
pointer-events-none
| pointer-events: none;
|
Examples
Auto
pointer-events-auto
<a href="#" class="pointer-events-auto">
This element responds to mouse events.
</a>
None
pointer-events-none
<a href="#" class="pointer-events-none">
This element does not respond to mouse events.
</a>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are: xs: > 480pxsm: > 640pxmd: > 768pxlg: > 1024pxxl: > 1280px
<div class="xs:pointer-events-auto ...">
...
</div>
Learn more about the responsive layout prefix. 2025-10-01