カーソル

要素にカーソルを合わせたときにカーソルスタイルを制御するためのユーティリティ

Class reference

Class
Properties
.cursor-autocursor: auto;
.cursor-defaultcursor: default;
.cursor-pointercursor: pointer;
.cursor-waitcursor: wait;
.cursor-textcursor: text;
.cursor-movecursor: move;
.cursor-not-allowedcursor: not-allowed;

Auto

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

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

Default

.cursor-defaultを使用して、常にプラットフォームに依存するデフォルトカーソル(通常は矢印)を使用するようにマウスカーソルを変更します。

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

Pointer

.cursor-pointerを使用して、マウスカーソルを変更し、インタラクティブな要素(通常はポインティングハンド)を示します。

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

Wait

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

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

Text

.cursor-textを使用してマウスカーソルを変更し、テキストを選択できることを示します(通常はIビーム形状)。

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

Move

.cursor-moveを使用して、マウスカーソルを変更し、移動可能なものを示します。

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

Not Allowed

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

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

カスタマイズ

Cursors

デフォルトでは、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',
      }
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはcursor utilitiesのために作られます。

あなたはどのバリアントがcursor utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのcursorプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     cursor: ['responsive'],
+     cursor: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしcursor utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのcursor propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!