Tailwind CSS User Select Cheatsheet
Complete reference for all Tailwind v4 user-select utilities.
Try selecting text in each example to see the behavior. Click class names to copy.
Quick Navigation
Prevents users from selecting text
user-select: none;Try to select this text (you won't be able to)
Try to select this text - you can't! This is useful for buttons, navigation items, or any UI element where text selection would interfere with clicks and interactions.
Allows text selection (default for most text)
user-select: text;Try selecting this text normally
You can freely select this text. This is the default behavior for text content. Use this class to explicitly enable selection when a parent has select-none.
Selects all text content on a single click
user-select: all;Click once to select all text instantly
npm install tailwindcssBrowser determines selection behavior automatically
user-select: auto;Selection follows browser default behavior
The browser decides how text selection works here based on context. This is useful when you want to reset to default behavior after changing user-select on a parent element.
Interactive Comparison
Try selecting text in each box to see the difference between utilities:
Common Use Cases
Buttons & Interactive Elements
<button class="select-none px-4 py-2"> Click Me </button> <nav class="select-none"> <a href="/">Home</a> <a href="/about">About</a> </nav>
Copy-Friendly Code Snippets
<code class="select-all bg-gray-100 p-2"> npm install tailwindcss </code> <div class="select-all font-mono"> sk_live_abc123xyz789 </div>
Nested Selection Control
{/* Parent disables, child enables */}
<div class="select-none">
<span>Not selectable</span>
<p class="select-text">
But this paragraph is!
</p>
</div>Drag & Drop Interfaces
<div class="select-none cursor-grab">
<div class="draggable-item">
Drag me around
</div>
<div class="draggable-item">
No text selection here
</div>
</div>Form Labels & Icons
<label class="select-none flex gap-2"> <input type="checkbox" /> <span>I agree to terms</span> </label> <div class="select-none flex gap-1"> <StarIcon /> <StarIcon /> <StarIcon /> </div>
Game & Canvas UIs
<div class="select-none">
<canvas id="game" />
<div class="controls">
<button>Play</button>
<button>Pause</button>
</div>
<div class="score">Score: 1000</div>
</div>Quick Reference Table
| Class | CSS | Use For |
|---|---|---|
select-none | user-select: none; | Buttons, nav items, drag handles, game UIs |
select-text | user-select: text; | Override parent select-none, standard text |
select-all | user-select: all; | Code snippets, API keys, URLs, copy-friendly text |
select-auto | user-select: auto; | Reset to browser default behavior |
Accessibility Consideration
While select-none is useful for UI elements, be mindful that some users rely on text selection for accessibility tools or to copy content. Avoid disabling selection on paragraphs, articles, or any content that users might legitimately want to copy. Reserve select-none for interactive elements like buttons and navigation where selection would interfere with the intended interaction.
Frequently Asked Questions
How do I disable text selection in Tailwind CSS?
Use the select-none class to prevent users from selecting text. This is commonly used on buttons, navigation items, and other UI elements where text selection would interfere with click interactions.
How do I make all text selectable with one click in Tailwind?
Use the select-all class. When users click on an element with this class, all the text content is automatically selected. This is perfect for code snippets, API keys, URLs, or any text that users frequently need to copy.
What is the difference between select-text and select-auto?
select-text explicitly sets user-select: text, ensuring text is always selectable. select-auto lets the browser decide based on the element type and context. In most cases they behave similarly, but select-text is useful to explicitly override an inherited select-none from a parent element.
Can I enable text selection on a child when the parent has select-none?
Yes! Apply select-text or select-auto to the child element to override the parent's select-none. This is useful when you want most of a component to be non-selectable but have specific parts that should be selectable.
Why would I use select-none on buttons?
When users double-click or hold on buttons, they might accidentally select the button text, which looks unprofessional and can interfere with the click action. Using select-none prevents this and creates a cleaner user experience.
Does select-none work on mobile devices?
Yes, select-none works on mobile devices too. It prevents the text selection popup that appears on long press. However, note that some mobile browsers may have slightly different behavior, and accessibility should be considered when disabling selection.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow