Tailwind CSS - User Select

Previous
Quiz
Next

Tailwind CSS User Select is a collection of predefined classes that manage how users can select text on a webpage, allowing you to specify whether text can be selected or not.

Tailwind CSS User Select Classes

Below is a list of Tailwind CSS User Select classes for controlling text selection behavior.

Class CSS Properties
select-none user-select: none;
select-text user-select: text;
select-all user-select: all;
select-auto user-select: auto;

Functionality of Tailwind CSS User Select Classes

  • select-none: This class stops users from selecting any text within the element.
  • select-text: This class allows users to select and copy text within the element.
  • select-all: This class allows users to select all text within the element at once.
  • select-auto: This class allows the browser to handle text selection based on its default behavior.

Tailwind CSS User Select Class Examples

Below are examples of Tailwind CSS User Select classes that show how to apply different text selection behaviors to elements on a webpage.

Tailwind CSS to Manage Text Selection

This example shows how to control text selection with Tailwind CSS User Select classes. The select-none class makes text unselectable, while select-text allows the user to select the text.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS User Select
    </h1>
    <h3 class="underline font-bold mb-2">
        select-none
    </h3>
    <div class="select-none bg-pink-200 p-2 mb-4">
        This text cannot be selected by the user.
    </div>
    <h3 class="underline font-bold mb-2">
        select-text
    </h3>
    <div class="select-text bg-blue-200 p-2">
        Text is selectable. Try selecting it with your mouse
    </div>
</body>

</html>

Tailwind CSS Select-All and Select-Auto Classes

This example shows how to use Tailwind CSS User Select classes for text selection. The select-all class highlights all the text when any part is selected, while select-auto classes follow the browser's default text selection behavior.

Example

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS User Select
    </h1>
    <h3 class="underline font-bold mb-2">
        select-all
    </h3>
    <div class="select-all bg-green-200 p-4 mb-4">
        Selecting any part highlights the entire text.
    </div> 
    <h3 class="underline font-bold mb-2">
        select-auto
    </h3>
    <div class="select-auto bg-yellow-200 p-4">
        This text follows the browser's default selection.
    </div>
</body>

</html>
Print Page
Previous
Next