User Select

Utilities for controlling whether the user can select text in an element.

Default class reference

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

Disable selecting text

Use select-none to prevent selecting text in an element and its children.

User Select - 图1

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

Allow selecting text

Use select-text to allow selecting text in an element and its children.

User Select - 图2

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

Select all text in one click

Use select-all to automatically select all the text in an element when a user clicks.

User Select - 图3

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

Auto

Use select-auto to use the default browser behavior for selecting text. Useful for undoing other classes like .select-none at different breakpoints.

User Select - 图4

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

Customizing

Variants

By default, only responsive variants are generated for user-select utilities.

You can control which variants are generated for the user-select utilities by modifying the userSelect property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  1. // tailwind.config.js
  2. module.exports = {
  3. variants: {
  4. extend: {
  5. // ...
  6. + userSelect: ['hover', 'focus'],
  7. }
  8. }
  9. }

Disabling

If you don’t plan to use the user-select utilities in your project, you can disable them entirely by setting the userSelect property to false in the corePlugins section of your config file:

  1. // tailwind.config.js
  2. module.exports = {
  3. corePlugins: {
  4. // ...
  5. + userSelect: false,
  6. }
  7. }

←Resize Fill→

Edit this page on GitHub