Tailwind CSS User Select

The user-select utility classes in Tailwind CSS allows you to control the selection behavior of your text.

Syntax

<!-- Default values -->
<div class="user-select-auto"></div>

<div class="user-select-none"></div>

<div class="user-select-text"></div>

<div class="user-select-all"></div>

Example

<div class="user-select-auto">
  <h1>user-select-auto</h1>
  <p>
    This is a paragraph text that allows text selection. You can select a part or all of this text.
  </p>
</div>

<div class="user-select-none">
  <h1>user-select-none</h1>
  <p>
    This is a paragraph text that does not allow text selection. You cannot select any part of this text.
  </p>
</div>

<div class="user-select-text">
  <h1>user-select-text</h1>
  <p>
    This is a paragraph text that allows only text selection. You cannot select any other element in this div but the text itself.

    <a href="#">Clickable link</a>, <button>Button</button>, images, and other elements cannot be selected.
  </p>
</div>

<div class="user-select-all">
  <h1>user-select-all</h1>
  <p>
    This is a paragraph text that allows selection of the entire div, including all its elements.
  </p>
  <a href="#">Clickable link</a> and <button>Button</button> can be selected, as well as images and other elements.
</div>

Output

The output will be different for each of the four classes described above.

Explanation

• user-select-auto: allows the default browser behavior for text selection.
• user-select-none: prevents the users from selecting any part of the text within the element.
• user-select-text: allows the selection of only the text within the element and prevents the selection of any other element.
• user-select-all: allows the selection of all the contents within the element, including all its child elements.

Use

Use the user-select utility classes to control the selection behavior of your text, based on the needs and requirements of your project.

Important Points

• The user-select utility classes only control the text selection behavior of an element and its children.
• The user-select property is not supported in some older browsers, like Internet Explorer or Safari.

Summary

The user-select utility classes in Tailwind CSS allow you to control the selection behavior of text within an element. With these classes, you can decide whether to allow or prevent text selection, as well as define which parts of the text are selectable.