Utilities for controlling whether an element responds to pointer events.
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>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'],
}
}
}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,
}
}