Размер шрифта

В предыдущем уроке вы сделали заголовок крупнее классом text-3xl. Это одна из ступеней шкалы размеров шрифта в Tailwind:

В названиях xs, sm, lg и xl размеры обозначены как на одежде: extra small, small, large, extra large (очень маленький, маленький, большой, очень большой). text-base — базовый размер, 16 пикселей. Начиная с xl, каждый лишний x означает размер побольше: 2xl, 3xl и так далее. Есть и ещё более крупные размеры, вплоть до text-9xl (8rem, 128 px).

Размеры заданы в rem, поэтому они учитывают размер шрифта, который посетитель выбрал в браузере, как вы знаете из курса CSS. Кроме того, каждый класс размера задаёт и подходящую ему высоту строки: у размеров для обычного текста строки просторные, примерно в полтора раза выше шрифта, чтобы текст легко читался; у крупных заголовков они теснее (начиная с text-5xl строка ровно такой же высоты, как шрифт), чтобы заголовок из двух строк не распадался.

Вы могли заметить, что классы размера начинаются с text-, как и классы цвета (text-orange-600) и text-center. Tailwind различает их по тому, что идёт дальше: размер, цвет или выравнивание.

Чтобы изменить размер заголовка, замените text-3xl другим размером, а не добавляйте второй. Как вы знаете из курса CSS, если два правила с одинаковой специфичностью задают одно свойство, побеждает то, что идёт в таблице стилей позже. У всех классов Tailwind одинаковая специфичность (один класс), поэтому, если у элемента два размера, решает порядок их правил в CSS Tailwind, а не порядок в атрибуте class. Например, class="text-4xl text-3xl" даёт заголовку размер text-4xl, хотя text-3xl стоит последним. Чтобы не гадать, давайте каждому элементу только один класс на каждое свойство.