Краткая справка

Класс
Свойства
pointer-events-nonepointer-events: none;
pointer-events-autopointer-events: auto;

Основы использования

Управление поведением события указателя

Используйте pointer-events-auto, чтобы вернуться к поведению браузера по умолчанию для событий указателя (например, :hover и click).

Используйте pointer-events-none, чтобы элемент игнорировал события указателя. События указателя по-прежнему будут запускаться для дочерних элементов и передаваться элементам, находящимся «ниже» цели.

Попробуйте щелкнуть значки поиска, чтобы увидеть ожидаемое поведение

pointer-events-auto

pointer-events-none

<div class="relative ...">
  <div class="absolute pointer-events-auto ...">
    <svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input type="text" placeholder="Поиск" class="...">
</div>

<div class="relative ...">
  <div class="absolute pointer-events-none ...">
    <svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
    </svg>
  </div>
  <input type="text" placeholder="Поиск" class="...">
</div>

Применяя условно

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use focus:pointer-events-auto to only apply the pointer-events-auto utility on focus.

<div class="pointer-events-none focus:pointer-events-auto">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Контрольные точки и медиа-запросы

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:pointer-events-auto to apply the pointer-events-auto utility at only medium screen sizes and above.

<div class="pointer-events-none md:pointer-events-auto">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.