交互
用于控制用户是否可以选择元素内文本的工具类。
| Class | Styles |
|---|---|
select-none | user-select: none; |
select-text | user-select: text; |
select-all | user-select: all; |
select-auto | user-select: auto; |
使用 select-none 工具类来阻止选择元素及其子元素中的文本：
尝试选中文本来查看预期效果
<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>使用 select-text 工具类来允许选择元素及其子元素中的文本：
尝试选中文本来查看预期效果
<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>使用 select-all 工具类可以在用户点击时自动选中元素内的所有文本：
尝试点击文本查看预期效果
<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>使用 select-auto 工具类可以应用浏览器默认的文本选择行为：
尝试选中文本查看预期效果
<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>Prefix an 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>Learn more about using variants in the variants documentation.