【Tailwind和訳】INTERACTIVITY/User Select

この記事について

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

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

---

User Select

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

クラス	プロパティ
select-none	user-select: none;
select-text	user-select: text;
select-all	user-select: all;
select-auto	user-select: auto;

テキストの選択を禁止する

select-noneを使って、要素とその子要素でテキストを選択できないようにします。

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

テキストの選択を許可する

select-textは、要素とその子要素でのテキストの選択を可能にします。

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

ワンクリックで全てのテキストを選択

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

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

オート

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

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

カスタマイズ

バリアント

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

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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