User Select

    Utilities for controlling whether the user can select text in an element.

    Use to prevent selecting text in an element and its children.

    Try selecting the text to see the expected behaviour

    User Select - 图2

    Allowing text selection

    Use select-text to allow selecting text in an element and its children.

    Try selecting the text to see the expected behaviour

    1. <div class="select-text ...">
    2.   The quick brown fox jumps over the lazy dog.

    Use select-all to automatically select all the text in an element when a user clicks.

    User Select - 图5

    Try selecting the text to see the expected behaviour

    Using auto select behaviour

    User Select - 图7

    Try selecting the text to see the expected behaviour

    1. <div class="select-auto ...">
    2.   The quick brown fox jumps over the lazy dog.
    3. </div>

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:select-all to only apply the utility on hover.

    For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

    Breakpoints and media queries

    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.

    1. <div class="md:select-all">
    2.   <!-- ... -->