- Типография
- Цвет текста
Типография
Цвет текста
Утилиты для управления цветом текста элемента.
Основы использования
Установка цвета текста
Управляйте цветом текста элемента с помощью утилит text-{color}.
Быстрая коричневая лиса прыгает через ленивую собаку.
<p class="text-blue-600">Быстрая коричневая лиса...</p><p class="text-sky-400">Быстрая коричневая лиса...</p>
Изменение непрозрачности
Управляйте непрозрачностью цвета текста элемента с помощью модификатора непрозрачности цвета.
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку.
Быстрая коричневая лиса прыгает через ленивую собаку.
<p class="text-blue-600/100">Быстрая коричневая лиса...</p> <p class="text-blue-600/75">Быстрая коричневая лиса...</p> <p class="text-blue-600/50">Быстрая коричневая лиса...</p> <p class="text-blue-600/25">Быстрая коричневая лиса...</p> <p class="text-blue-600/0">Быстрая коричневая лиса...</p><p class="text-sky-400/100">Быстрая коричневая лиса...</p> <p class="text-sky-400/75">Быстрая коричневая лиса...</p> <p class="text-sky-400/50">Быстрая коричневая лиса...</p> <p class="text-sky-400/25">Быстрая коричневая лиса...</p> <p class="text-sky-400/0">Быстрая коричневая лиса...</p>
Вы можете использовать любое значение, определенное в вашей шкале непрозрачности, или использовать произвольные значения, если вам нужно отклониться от маркеров вашего дизайна.
<p class="text-blue-600/[.06]">Быстрая коричневая лиса...</p>Применяя условно
Наведение, фокус и другие состояния
Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:text-blue-600, чтобы применять утилиту text-blue-600 только при hover.
Попробуйте навести курсор мыши на текст, чтобы увидеть ожидаемое поведение
Быстрая коричневая лиса прыгает через ленивую собаку.
<p class="text-slate-500 hover:text-blue-600">Быстрая коричневая лиса...</p><p class="text-slate-400 hover:text-sky-400">Быстрая коричневая лиса...</p>
Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Контрольные точки и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:text-green-600, чтобы применить утилиту text-green-600 только на экранах среднего размера и выше.
<p class="text-blue-600 md:text-green-600">
<!-- ... -->
</p>
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
Использование пользовательских значений
Настройка вашей темы
По умолчанию Tailwind делает всю цветовую палитру по умолчанию доступной в виде цветов text. Вы можете настроить свою цветовую палитру, отредактировав theme.colors или theme.extend.colors в файле tailwind.config.js.
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
},
}
}
}
Кроме того, вы можете настроить только цвета text, отредактировав theme.textColor или theme.extend.textColor в своем файле tailwind.config.js.
Узнайте больше о настройке темы по умолчанию в документации по кастомизации темы.
Произвольные значения
Если вам нужно использовать одноразовое color value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.
<p class="text-[#50d71e]">
<!-- ... -->
</p>
Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.
