Выделение текста

​

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

​

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

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

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

​

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

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

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

​

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

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

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

​

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

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

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

​

Применяя условно

​

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:select-all, чтобы применять утилиту select-all только при hover.

<div class="hover:select-all">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:select-all, чтобы применить утилиту select-all только на экранах среднего размера и выше.

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

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.