Типография
Утилиты для управления смещением подчеркивания текста.
Используйте утилиты underline-offset-{width}
, чтобы изменить смещение подчеркивания текста.
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку.
<p class="underline underline-offset-1 ...">Быстрая коричневая лиса...</p>
<p class="underline underline-offset-2 ...">Быстрая коричневая лиса...</p>
<p class="underline underline-offset-4 ...">Быстрая коричневая лиса...</p>
<p class="underline underline-offset-8 ...">Быстрая коричневая лиса...</p>
Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:underline-offset-4
, чтобы применять утилиту underline-offset-4
только при hover.
<p class="underline hover:underline-offset-4">
<!-- ... -->
</p>
Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:underline-offset-4
, чтобы применить утилиту underline-offset-4
только на экранах среднего размера и выше.
<p class="underline md:underline-offset-4">
<!-- ... -->
</p>
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
Вы можете настроить утилиты underline-offset-{width}
, отредактировав theme.textUnderlineOffset
или theme.extend.textUnderlineOffset
в вашем файле tailwind.config.js
.
module.exports = {
theme: {
extend: {
textUnderlineOffset: {
3: '3px',
}
}
}
}
Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
Если вам нужно использовать одноразовое text-underline-offset
value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.
<p class="underline-offset-[3px]">
<!-- ... -->
</p>
Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.