User Select

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

Class reference

Class Properties
.select-none user-select: none;
.select-text user-select: text;
.select-all user-select: all;
.select-auto user-select: auto;

Disable selecting text

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

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

Allow selecting text

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

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

Select all text in one click

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

Click anywhere in this text to select it all 
<div class="select-all ...">
  Click anywhere in this text to select it all
</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.

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

Customizing

Responsive and pseudo-class 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:

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

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:

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