Pointer Events

Utilities for controlling whether an element responds to pointer events.

Class reference

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.

Try clicking the caret icon to open the dropdown

.pointer-events-auto (event captured)

.pointer-events-none (event passes through)

<div class="relative">
  <select class="...">
    <option>Indiana</option>
    <option>Michigan</option>
    <option>Ohio</option>
  </select>
  <div class="pointer-events-auto ...">
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
  </div>
</div>

<div class="relative">
  <select class="...">
    <option>Indiana</option>
    <option>Michigan</option>
    <option>Ohio</option>
  </select>
  <div class="pointer-events-none ...">
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
  </div>
</div>

Customizing

Responsive and pseudo-class variants

By default, only responsive variants are generated for pointer event utilities.

You can control which variants are generated for the pointer event utilities by modifying the pointerEvents property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     pointerEvents: ['responsive'],
+     pointerEvents: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don't plan to use the pointer event utilities in your project, you can disable them entirely by setting the pointerEvents property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     pointerEvents: false,
    }
  }

← Outline Resize →