Tailwind CSS - User Select

Modern Tailwind CSS: Controlling User Selection

The user-select property in CSS controls whether a user can select text within an element. Tailwind provides a set of intuitive select-* utilities to manage this behavior, which is crucial for crafting a polished and intentional user experience (UX).

User Select Utilities

Tailwind’s utilities cover all common use cases for text selection.

Class	CSS Property	Typical Use Case
select-none	user-select: none;	Buttons, interactive UI, icons where text selection is distracting.
select-text	user-select: text;	Standard paragraphs, articles, and any content that should be copyable.
select-all	user-select: all;	Code blocks, API keys, or pre-formatted text for easy one-click copying.
select-auto	user-select: auto;	Lets the browser decide based on context (default behavior).

Practical Examples

To follow these examples, ensure you have a modern Tailwind CSS project set up. See the setup guide in other chapters for instructions.

Example 1: Disabling Selection on a Custom Button

When you click and drag on a button, you don’t want to accidentally select its text. select-none prevents this, making custom-styled <div> or <a> tags behave more like native buttons.

<link href="/dist/output.css" rel="stylesheet">

<body class="p-8 flex flex-col items-center gap-4">
  <!-- Try to select the text in this button. You can't. -->
  <button
    class="
      bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg
      shadow-lg hover:bg-indigo-700 active:bg-indigo-800
      focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75
      select-none
    ">
    Click Me
  </button>

  <!-- The text in this paragraph is selectable by default. -->
  <p class="select-text max-w-sm text-center">
    Regular text like this should be selectable so users can copy it, share it, or use it with assistive technologies.
  </p>
</body>

Example 2: One-Click Selection for a Code Block

For code snippets, installation commands, or API keys, select-all is a fantastic UX enhancement. A single click anywhere inside the element selects the entire content, making it effortless for the user to copy.

<link href="/dist/output.css" rel="stylesheet">

<body class="p-8 bg-slate-900">
  <div class="max-w-md mx-auto">
    <label class="text-slate-400 font-medium">Click the command below to copy it:</label>

    <!-- One click selects the whole command -->
    <pre
      class="
        bg-slate-800 text-green-400 font-mono text-sm
        p-4 mt-2 rounded-md select-all cursor-pointer
      ">
      <code>npm install -D tailwindcss</code>
    </pre>
  </div>
</body>

Accessibility and UX Considerations

Use select-none with caution. While it’s great for non-textual UI elements, disabling text selection on content can be a major accessibility issue. Users may rely on selection for various reasons:

• Copying and Pasting: The most obvious use case.
• Assistive Technology: Some screen readers and tools use text selection to read or define a portion of the text.
• Translation: Browser extensions for translation often operate on selected text.
• Readability: Some users select text as they read to help them focus.

As a rule of thumb, only apply select-none to elements that are clearly interactive controls, not to informational content.