Домашняя страница Tailwind CSS
  1. Типография
  2. Оформление текста

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

Класс
Свойства
underlinetext-decoration-line: underline;
overlinetext-decoration-line: overline;
line-throughtext-decoration-line: line-through;
no-underlinetext-decoration-line: none;

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

Настройка оформления текста

Управляйте оформлением текста с помощью утилит underline, no-underline и line-through.

underline

Быстрая коричневая лиса прыгает через ленивую собаку.

overline

Быстрая коричневая лиса прыгает через ленивую собаку.

line-through

Быстрая коричневая лиса прыгает через ленивую собаку.

no-underline

Быстрая коричневая лиса прыгает через ленивую собаку. 

<p class="underline ...">Быстрая коричневая лиса ...</p>
<p class="overline ...">Быстрая коричневая лиса ...</p>
<p class="line-through ...">Быстрая коричневая лиса ...</p>
<p class="no-underline ...">Быстрая коричневая лиса ...</p>

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

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

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

Link with no underline 
<a href="#" class="no-underline hover:underline ...">Link</a>

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

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

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

<p class="no-underline md:underline">
  <!-- ... -->
</p>

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