cursor

例

基本的な例

`cursor-pointer` や `cursor-grab` などのユーティリティを使用して、要素にホバーしたときに表示されるカーソルを制御します

<button class="cursor-pointer ...">Submit</button>
<button class="cursor-progress ...">Saving...</button>
<button class="cursor-not-allowed ..." disabled>Confirm</button>

カスタム値の使用

次の cursor-[<value>] 構文 を使用して、cursor完全にカスタム値に基づいてを設定するには

<button class="cursor-[url(hand.cur),_pointer] ...">
  <!-- ... -->
</button>

CSS変数には、次の cursor-(<custom-property>) 構文

<button class="cursor-(--my-cursor) ...">
  <!-- ... -->
</button>

も使用できます。これは cursor-[var(<custom-property>)] の単なる省略形であり、var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa `cursor` ユーティリティ `md:` のようなブレークポイントバリアントをプレフィックスとして使用して、ユーティリティをmedium 以上の画面サイズでのみ適用します

<button class="cursor-not-allowed md:cursor-auto ...">
  <!-- ... -->
</button>

バリアントの使用に関する詳細は、バリアントのドキュメントをご覧ください。