交互
用于控制用户是否可以选择元素中的文本的工具。
¥Basic usage
¥Disabling text selection
使用 select-none
可防止选择元素及其子元素中的文本。
¥Use select-none
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
使用 select-text
允许选择元素及其子元素中的文本。
¥Use select-text
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
使用 select-all
在用户单击时自动选择元素中的所有文本。
¥Use select-all
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 behaviour
使用 select-auto
以使用默认的浏览器行为来选择文本。对于在不同的断点处撤消其他类(如 select-none
)很有用。
¥Use select-auto
to use the default browser behavior for selecting text. Useful for undoing other classes like select-none
at different breakpoints.
尝试选择文本以查看预期的行为
<div class="select-auto ...">
The quick brown fox jumps over the lazy dog.
</div>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:select-all
to only apply the select-all
utility on hover.
<div class="hover:select-all">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:select-all
to apply the select-all
utility at only medium screen sizes and above.
<div class="md:select-all">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.