User Select

Disable selecting text

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

Use .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

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

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

Customizing

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:

Disabling

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

← Resize