Дефисы

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

​None

Используйте hyphens-none, чтобы предотвратить перенос слов, даже если используется предложение разрыва строки ­:

<p class="hyphens-none ...">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>

​Manual

Используйте hyphens-manual, чтобы устанавливать точки переноса только там, где используется предложение разрыва строки ­:

<p class="hyphens-manual ...">
  ... Kraftfahrzeug&shy;haftpflichtversicherung is a ...
</p>

​Auto

Используйте hyphens-auto, чтобы позволить браузеру автоматически выбирать точки переноса в зависимости от языка. Предложение разрыва строки ­ предпочтительнее, чем автоматические точки переноса.

<p class="hyphens-auto ..." lang="de">
  ... Kraftfahrzeughaftpflichtversicherung is a ...
</p>

---

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

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

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

<p class="hyphens-none hover:hyphens-auto">
  <!-- ... -->
</p>

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

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

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

<p class="hyphens-none md:hyphens-auto">
  <!-- ... -->
</p>

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