Цветовая палитра

В этом уроке вы зададите странице цвета и позаботитесь о тексте: его размере, жирности, высоте строки, выравнивании, расстоянии между буквами и шрифте. Всё это вы знаете из курса CSS; теперь вы сделаете это с помощью классов Tailwind.

Мы будем работать над страницей Тигра на сайте нашего приюта. Тигр — двухлетний полосатый кот, который ищет новый дом. Посмотрите на код: у заголовка уже есть классы text-3xl и font-bold из предыдущего урока, а ссылка подчёркнута (underline). Есть на странице и несколько классов, которых вы пока не знаете: mx-auto max-w-xl p-8 у main и mt-3, mt-4 и подобные у некоторых абзацев. Они добавляют пространство вокруг частей страницы и между ними, чтобы текст не прижимался к краям предпросмотра. Вы узнаете о них в следующем уроке; пока оставьте их как есть.

В курсе CSS вы задавали цвет текста свойством color в правиле в style.css. С Tailwind вы просто даёте элементу класс:

<h1 class="text-orange-600">Тигр</h1>

Название класса состоит из трёх частей: text говорит, что получает цвет (текст), orange — это цвет, а 600 — его оттенок. Tailwind создаёт для него такое правило:

.text-orange-600 {
	color: oklch(64.6% 0.222 41.116);
}

(Настоящий CSS Tailwind выглядит немного иначе, но цвет тот же.) oklch — ещё один способ записать цвет. Он работает как HSL из курса CSS: первое число — светлота (64,6%), второе показывает, насколько цвет яркий и насыщенный, а третье — его положение на цветовом круге в градусах (41°, оранжевый). Писать его самим не нужно: в Tailwind цвета выбирают по названиям.

В Tailwind нет всех 16 миллионов цветов. Там есть цветовая палитра: набор цветов, которые дизайнеры подобрали так, чтобы они хорошо сочетались друг с другом. В ней 26 цветов: 17 цветных и 9 серых, причём у каждого серого свой лёгкий оттенок:

red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose

slate gray zinc neutral stone taupe mauve mist olive

Каждый цвет бывает в 11 оттенках, пронумерованных от 50 (самый светлый) через 100, 200 и так далее до 900 и 950 (самый тёмный). Вот оттенки оранжевого:

50 100 200 300 400 500 600 700 800 900 950

Кроме того, есть black и white без оттенка: text-black, text-white.

Зачем палитра, если в CSS можно задать любой цвет? Потому что с ней проще выбирать: вместо поисков нужного кода цвета вы берёте название и число, а цвета из одной палитры хорошо смотрятся вместе. И когда вы видите в HTML text-orange-600, вы сразу знаете, что это за цвет. Позже в курсе вы увидите, как использовать и собственные цвета.

Остерегайтесь опечаток и выдуманных названий: классов text-orange (без оттенка) и text-orange-650 не существует, поэтому они ничего не делают, а сообщения об ошибке вы не получите. Как вы знаете, Tailwind создаёт CSS только для тех классов, которые ему известны.