You're looking at the documentation for Tailwind CSS v2.
Tailwind CSS on GitHub

Pointer Events

Utilities for controlling whether an element responds to pointer events.

Default class reference

Class
Properties
pointer-events-nonepointer-events: none;
pointer-events-autopointer-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

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: {
      extend: {
        // ...
+       pointerEvents: ['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,
    }
  }