Краткая справка

Класс
Свойства
select-noneuser-select: none;
select-textuser-select: text;
select-alluser-select: all;
select-autouser-select: auto;

Основы использования

Отключение выделения текста

Используйте select-none, чтобы предотвратить выделение текста в элементе и его дочерних элементах.

Try selecting the text to see the expected behaviour

Быстрая коричневая лиса прыгает через ленивую собаку.
<div class="select-none ...">
  Быстрая коричневая лиса прыгает через ленивую собаку.
</div>

Разрешение выделения текста

Используйте select-text, чтобы разрешить выделение текста в элементе и его дочерних элементах.

Try selecting the text to see the expected behaviour

Быстрая коричневая лиса прыгает через ленивую собаку.
<div class="select-text ...">
  Быстрая коричневая лиса прыгает через ленивую собаку.
</div>

Выделение всего текста одним щелчком мыши

Используйте select-all, чтобы автоматически выделять весь текст в элементе, когда пользователь щелкает мышью.

Try selecting the text to see the expected behaviour

Быстрая коричневая лиса прыгает через ленивую собаку.
<div class="select-all ...">
  Быстрая коричневая лиса прыгает через ленивую собаку.
</div>

Использование автоматического выбора поведения

Используйте select-auto, чтобы использовать поведение браузера по умолчанию для выделения текста. Полезно для отмены других классов, таких как .select-none, в разных контрольных точках.

Попробуйте выделить текст, чтобы увидеть ожидаемое поведение

Быстрая коричневая лиса прыгает через ленивую собаку.
<div class="select-auto ...">
  Быстрая коричневая лиса прыгает через ленивую собаку.
</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.