Оттенки

Номер оттенка показывает, насколько светел цвет: 50 — почти белый, 950 — почти чёрный, а около 500 цвет самый яркий. Светлые оттенки хороши для фонов, тёмные — для текста.

Для фонов в Tailwind есть классы, которые начинаются с bg- (background — фон). Они задают свойство background-color и используют те же цвета и оттенки, что и классы text-:

Схема всегда одна и та же: что получает цвет, затем цвет и его оттенок. Вы встретите её и в других классах, например для цвета рамки.

Светлый фон и тёмный текст того же цвета — частый вид маленьких меток, или бейджей. Мы сделаем такой из слова «Игривый» под возрастом Тигра, в цвете emerald — свежем зелёном, который хорошо сочетается с оранжевым:

Игривый

Выбирая оттенки, думайте о контрасте, как в курсе CSS: текст должен чётко выделяться на фоне. Чем дальше друг от друга два оттенка, тем лучше. На светлом фоне (от 50 до 200) берите текст оттенка 700 или темнее, на тёмном (от 800 до 950) — текст оттенка 200 или светлее. Близкие оттенки читаются плохо, особенно в мелком тексте:

Emerald 500 на emerald 100 читается плохо.

Emerald 800 на emerald 100 читается легко.

Поэтому ссылка и получила text-orange-700: крупный заголовок хорошо читается и ярким orange-600, а мелкому тексту ссылки нужен оттенок потемнее.

Обратите внимание, что фон бейджа плотно облегает его буквы. Как добавить пространство внутри него, вы узнаете в следующем уроке.