user-select

要素内のテキストを選択可能にするかどうかを制御するユーティリティ。

クラススタイル

select-none

user-select: none;

select-text

user-select: text;

select-all

user-select: all;

select-auto

user-select: auto;

例

`select-none`ユーティリティを使用して、要素とその子要素内のテキストを選択できないようにします。

テキストを選択して、期待される動作を確認してください

The quick brown fox jumps over the lazy dog.

<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>

`select-text`ユーティリティを使用して、要素とその子要素内のテキストを選択できるようにします。

テキストを選択して、期待される動作を確認してください

The quick brown fox jumps over the lazy dog.

<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>

`select-all`ユーティリティを使用して、ユーザーがクリックしたときに要素内のテキスト全体を自動的に選択するようにします。

テキストをクリックして、期待される動作を確認してください

The quick brown fox jumps over the lazy dog.

<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>

`select-auto`ユーティリティを使用して、テキスト選択のデフォルトのブラウザの動作を使用します。

テキストを選択して、期待される動作を確認してください

The quick brown fox jumps over the lazy dog.

<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>

プレフィックスan user-selectユーティリティ `md:`のようなブレークポイントバリアントを使用して、ユーティリティを適用する範囲をmedium 以上の画面サイズに限定します

<div class="select-none md:select-all ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。