Утилиты для контроля реакции элемента на события указателя.
Используйте pointer-events-auto, чтобы вернуться к поведению браузера по умолчанию для событий указателя (например, :hover и click).
Используйте pointer-events-none, чтобы элемент игнорировал события указателя. События указателя по-прежнему будут запускаться для дочерних элементов и передаваться элементам, находящимся «ниже» цели.
Попробуйте нажать иконку курсора, чтобы открыть раскрывающийся список
pointer-events-auto (событие зафиксировано)
pointer-events-none (событие проходит через)
<div class="relative">
<select class="...">
<option>Индиана</option>
<option>Мичиган</option>
<option>Огайо</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>Индиана</option>
<option>Мичиган</option>
<option>Огайо</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>По умолчанию, только responsive варианты создаются для утилит pointer event.
Вы можете контролировать, какие варианты создаются для утилит pointer event для изменения свойства pointerEvents в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ pointerEvents: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения pointer event, Вы можете полностью отключить их, установив для pointerEvents свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ pointerEvents: false,
}
}