Свой шрифт

Шрифты тоже живут в теме. Классы font-sans, font-serif и font-mono берутся из переменных --font-sans, --font-serif и --font-mono, а каждая переменная, имя которой начинается с --font-, создаёт класс, задающий font-family. Давайте дадим заголовкам округлый дружелюбный шрифт, который подходит приюту для кошек: Comfortaa из Google Fonts.

В курсе CSS вы подключали веб-шрифт элементами link в head страницы. С Tailwind это тоже работает, но есть и другой способ, прямо в таблице стилей: правило @import, которое загружает другую таблицу стилей, так же как @import "tailwindcss". Google Fonts предлагает его и в коде для вставки (Get embed code): выберите @import вместо <link> и скопируйте только строку с @import, без окружающих её тегов <style>.

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap");
@import "tailwindcss";

Адрес такой же, как в элементе link: шрифт Comfortaa с начертаниями 400, 600 и 700 (если в названии шрифта есть пробел, в адресе он записывается как +). Следите за порядком: любой @import должен стоять раньше всех остальных правил в таблице стилей. @import "tailwindcss" приносит множество правил (Preflight и классы), поэтому @import, написанный после него, опаздывает. Браузер пропустит его без всякой ошибки, и страница просто будет использовать запасной шрифт.

Затем вы добавляете шрифт в тему:

@theme {
	--color-brand-500: #f97316;
	--color-brand-600: #ea580c;
	--font-display: "Comfortaa", sans-serif;
}

Переменная --font-display создаёт класс font-display:

.font-display {
	font-family: var(--font-display);
}

Значение — это список шрифтов, как в font-family: если Comfortaa не удастся загрузить, браузер возьмёт свой шрифт без засечек. Название шрифта можно писать в кавычках, а если в нём есть пробел, как в «Baloo 2» или «Open Sans», кавычки обязательны, как вы знаете из курса CSS. Имя display мы выбрали сами: шрифты для заголовков и другого крупного текста называют display-шрифтами. Вы могли бы назвать переменную --font-headings и использовать класс font-headings.

Можно изменить и значение, которое в Tailwind уже есть. Preflight задаёт всей странице шрифт из --font-sans, поэтому с --font-sans: "Nunito", sans-serif; в @theme весь текст на странице был бы набран шрифтом Nunito (если вы импортировали и его).