Домашняя страница 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:text-center, чтобы применять утилиту text-center только при hover.

Try hovering over the text to see the expected behaviour

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

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

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

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

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

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