Итоги

В этом уроке вы узнали, что:

• В Tailwind есть цветовая палитра из 26 цветов, каждый в 11 оттенках, от 50 (самый светлый) до 950 (самый тёмный), а также black, white и transparent.
• Классы цвета строятся по одной схеме: что получает цвет, цвет и его оттенок. text-orange-600 задаёт цвет текста, bg-emerald-100 — цвет фона.
• Текст легко читать, когда оттенки текста и фона далеки друг от друга: светлый фон и тёмный текст или наоборот.
• Цвет текста наследуется, поэтому цвета всей страницы задают на body: bg-stone-50 text-stone-800.
• Косая черта и число делают цвет прозрачным: bg-orange-500/20 — это оранжевый с непрозрачностью 20%.
• Размеры шрифта идут от text-xs (12 px) через text-base (16 px) до text-9xl, заданы в rem, и каждый из них ещё и задаёт высоту строки.
• У элемента должен быть только один класс на каждое свойство: заменяйте класс, а не добавляйте второй. Какой из двух таких классов победит, зависит от порядка в CSS Tailwind, а не от порядка в class.
• Жирность идёт от font-thin (100) до font-black (900); чаще всего используют font-normal, font-medium, font-semibold и font-bold.
• Классы leading- задают высоту строки (leading-relaxed — для абзацев), а text-left, text-center, text-right и text-justify — выравнивание.
• Классы tracking- задают расстояние между буквами, а uppercase, lowercase, capitalize и normal-case — регистр букв.
• Шрифт выбирают классы font-sans (по умолчанию), font-serif и font-mono. Классы underline, line-through и no-underline рисуют или убирают линию, decoration- задаёт её цвет, а underline-offset- — расстояние от текста.

У страницы Тигра теперь свой тёплый вид: оранжевое имя шрифтом с засечками, мягкий серый текст на светлом фоне, зелёный бейдж и оранжевая ссылка. В следующем уроке, «Отступы и размеры», вы узнаете классы для пространства, которые мы использовали на страницах: внутренние отступы (padding), внешние отступы (margin), ширину и высоту.

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