Свои цвета

На этом уроке вы настроите Tailwind под себя: добавите в него собственные цвета и шрифты и узнаете, что делать, когда один и тот же список классов приходится писать снова и снова.

Работать мы будем над главной страницей приюта: шапка, первый экран (приветственный блок вверху с заголовком и кнопкой) и карточки кошек. Страница оформлена классами, которые вы знаете из прошлых уроков. Чтобы увидеть карточки в ряд, переключите предпросмотр на 1280 px.

Главный цвет приюта — оранжевый, и он встречается по всей странице: bg-orange-500 и hover:bg-orange-600 на пяти кнопках, text-orange-600 на заголовке. (Фон первого экрана и ссылка «Поддержать» тоже оранжевые, но там цвета записаны произвольными значениями в квадратных скобках. До них мы дойдём позже на этом уроке.) Теперь представьте, что у приюта появился новый логотип другого оттенка оранжевого или вовсе зелёного. Пришлось бы искать и менять каждый из этих классов, и один легко пропустить. Лучше дать цвету имя, например brand (фирменный цвет — тот, по которому люди узнают компанию или организацию), и в одном месте сказать, что это за цвет.

Цвета Tailwind не высечены в камне. Они берутся из его темы: списка значений, из которых Tailwind делает классы (цвета, шрифты, шаг отступов, брейкпоинты и другое). Каждое значение в теме — это CSS-переменная: имя, начинающееся с двух дефисов, со значением, которое CSS потом может использовать в других местах. Вот, например, как тема определяет orange-500:

--color-orange-500: oklch(70.5% 0.213 47.604);

(Про oklch вы знаете из урока «Цвета и текст».) Tailwind читает имя переменной: --color- говорит, что это цвет, а остаток, orange-500, становится концом классов bg-orange-500, text-orange-500, border-orange-500 и любого другого класса, принимающего цвет.

Свои значения вы добавляете в тему в файле style.css, в блоке @theme после @import "tailwindcss";:

@import "tailwindcss";

@theme {
	--color-brand-500: #f97316;
	--color-brand-600: #ea580c;
}

Цвета можно записывать в любом известном вам формате: hex, rgb или hsl. Теперь у Tailwind два новых цвета, brand-500 и brand-600, и со всеми цветовыми классами они работают: bg-brand-500, text-brand-600, border-brand-500, hover:bg-brand-600 и даже с прозрачностью, как в bg-brand-500/50. Класс bg-brand-500 создаёт такой CSS:

.bg-brand-500 {
	background-color: var(--color-brand-500);
}

var(--color-brand-500) означает «значение переменной». Поэтому, когда вы меняете значение в @theme, вместе с ним меняются все классы с brand-500 — по всей странице.

Имя brand и числа выбираете вы. Мы взяли 500 и 600, как в палитре Tailwind: сразу видно, какой оттенок темнее, и остаётся место для более светлых и тёмных оттенков.