User Select

Default 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

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: {   extend: {  // ... +  userSelect: ['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,   }  }