【Tailwind和訳】INTERACTIVITY/Pointer Events

この記事について

この記事は、INTERACTIVITY/Pointer Eventsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

---

Pointer Events

要素がポインタのイベントに反応するかどうかを制御するためのユーティリティ。

クラス	プロパティ
pointer-events-none	pointer-events: none;
pointer-events-auto	pointer-events: auto;

使い方

pointer-events-auto を使用すると、ポインタイベント（:hover や click など）に対するブラウザのデフォルトの動作に戻ります。

pointer-events-none を使用すると、要素がポインタイベントを無視します。ポインタイベントは子要素でも発生し、ターゲットの「下」にある要素にもパススルーされます。

<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>

カスタマイズ

バリアント

デフォルトでは、ポインターイベントのユーティリティーにはレスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある pointerEvents プロパティを変更することで、ポインターイベントユーティリティー用に生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+      pointerEvents: ['hover', 'focus'],
      }
    }
  }

無効化

ポインターイベントユーティリティーをプロジェクトで使用する予定がない場合は、設定ファイルの corePlugins セクションで pointerEvents プロパティを false に設定することで、完全に無効にすることができます。

tailwind.config.js

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