【Tailwind和訳】INTERACTIVITY/Cursor

この記事について

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

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

---

Cursor

要素の上にカーソルを置いたときのカーソルスタイルを制御するユーティリティーです。

クラス	プロパティ
cursor-auto	cursor: auto;
cursor-default	cursor: default;
cursor-pointer	cursor: pointer;
cursor-wait	cursor: wait;
cursor-text	cursor: text;
cursor-move	cursor: move;
cursor-help	cursor: help;
cursor-not-allowed	cursor: not-allowed;

Auto

cursor-autoを使用して、ブラウザが現在のコンテンツに基づいてカーソルを変更できるようにします（例：テキストにカーソルを合わせたときに自動的にtextカーソルに変更する）。

<div class="cursor-auto ...">Hover over this text</div>

Default

cursor-defaultを使用すると、マウスカーソルがプラットフォーム依存のデフォルトカーソル（通常は矢印）を常に使用するようになります。

<div class="cursor-default ...">Hover over this text</div>

Pointer

マウスカーソルをインタラクティブな要素（通常は指差す手）を示すように変更するには、cursor-pointerを使用します。

<div class="cursor-pointer ...">Hover me</div>

Wait

バックグラウンドで何かが起こっていることを示すためにマウスカーソルを変更するには、cursor-waitを使用します（通常は砂時計や時計）。

<div class="cursor-wait ...">Hover me</div>

Text

cursor-textを使うと、テキストが選択可能であることを示すために、マウスカーソルが変化します（通常は I ビームの形）。

<div class="cursor-text ...">Hover me</div>

Move

マウスカーソルを移動可能な状態にするには、cursor-moveを使います。

<div class="cursor-move ...">Hover me</div>

Not Allowed

cursor-not-allowedは、マウスカーソルを変更して、何かを操作したりクリックしたりすることができないことを示します。

<div class="cursor-not-allowed ...">Hover me</div>

カスタマイズ

カーソル

デフォルトでは、Tailwind は 6 つのcursorユーティリティを提供しています。これらを変更、追加、削除するには、Tailwind 設定のtheme.cursorセクションを編集します。

tailwind.config.js

  module.exports = {
    theme: {
      cursor: {
        auto: 'auto',
        default: 'default',
        pointer: 'pointer',
-       wait: 'wait',
        text: 'text',
-       move: 'move',
        'not-allowed': 'not-allowed',
+       crosshair: 'crosshair',
+       'zoom-in': 'zoom-in',
      }
    }
  }

バリアント

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

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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