ユーザーセレクト

ユーザーが要素内のテキストを選択できるかどうかを制御するためのユーティリティ。

Class reference

Class
Properties
.select-noneuser-select: none;
.select-textuser-select: text;
.select-alluser-select: all;
.select-autouser-select: auto;

Disable selecting text

要素とその子のテキストを選択しないようにするには、.select-noneを使用します。

This text is not selectable
<div class="select-none ...">
  This text is not selectable
</div>

Allow selecting text

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

This text is selectable
<div class="select-text ...">
  This text is selectable
</div>

Select all text in one click

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

Click anywhere in this text to select it all
<div class="select-all ...">
  Click anywhere in this text to select it all
</div>

Auto

テキストの選択にデフォルトのブラウザ動作を使用するには、.select-autoを使用します。異なるブレークポイントで.select-noneのような他のクラスを元に戻すのに便利です。

This text is selectable
<div class="select-auto ...">
  This text is selectable
</div>

Customizing

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!