Disable selecting text
.select-none to prevent selecting text in an element and its children.
<div class="select-none ..."> This text is not selectable </div>
Allow selecting text
.select-text to allow selecting text in an element and its children.
<div class="select-text ..."> This text is selectable </div>
Select all text in one click
.select-all to automatically select all the text in an element when a user clicks.
<div class="select-all ..."> Click anywhere in this text to select it all </div>
.select-auto to use the default browser behavior for selecting text. Useful for undoing other classes like
.select-none at different breakpoints.
<div class="select-auto ..."> This text is selectable </div>
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
For example, this config will also generate hover and focus variants:
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: