user-select

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

Quick reference

Class	Styles
select-none	user-select: none;
select-text	user-select: text;
select-all	user-select: all;
select-auto	user-select: auto;

Examples

Disabling text selection

Use the select-none utility to prevent selecting text in an element and its children:

<div class="select-none ...">
  The quick brown fox jumps over the lazy dog.
</div>

Allowing text selection

Use the select-text utility to allow selecting text in an element and its children:

<div class="select-text ...">
  The quick brown fox jumps over the lazy dog.
</div>

Selecting all text in one click

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

<div class="select-all ...">
  The quick brown fox jumps over the lazy dog.
</div>

Using auto select behavior

Use the select-auto utility to use the default browser behavior for selecting text:

<div class="select-auto ...">
  The quick brown fox jumps over the lazy dog.
</div>

Responsive design

Prefix a user-select utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="select-none md:select-all ...">
  <!-- ... -->
</div>