Урок 03. Справочник: директивы и токены темы

📁 Раздел: Введение ⏱️ Время изучения: ~50 мин 🎯 Сложность: Начальная

@source — что сканировать, @theme — из чего генерировать, @layer — в каком порядке применять.

Директивы движка

Директива	Что делает	Пример
`@import "tailwindcss";`	Подключает тему, preflight и утилиты	—
`@import "tailwindcss" source(none);`	Отключает автоопределение файлов	сканируется только явное
`@source "путь";`	Добавляет файлы или каталог к сканированию	`@source "../ui-kit/dist";`
`@source not "путь";`	Исключает файлы из сканирования	`@source not "./src/legacy";`
`@source inline("классы");`	Генерирует классы, которых нет в коде	`@source inline("underline");`
`@theme { … }`	Объявляет токены темы	`--color-brand-500: …;`
`@theme inline { … }`	Подставляет значение токена прямо в утилиту	для семантических тем
`@layer components { … }`	Ваш CSS, который утилиты могут переопределить	—
`@utility имя { … }`	Своя утилита (урок 15)	`@utility card-surface { … }`
`@custom-variant имя (…);`	Свой вариант (уроки 12–13)	`@custom-variant dark (&:where(.dark, .dark *));`

Переменная	Что порождает	Пример утилиты
`--color-*`	Цветовые утилиты	`bg-brand-500`, `text-brand-500`
`--spacing`	Базовый шаг всей шкалы отступов	`p-4`, `gap-2`, `mt-8`
`--spacing-*`	Именованный размер	`p-huge`
`--font-*`	Семейства шрифтов	`font-sans`
`--text-*`	Размеры текста	`text-sm`
`--radius-*`	Скругления	`rounded-lg`
`--shadow-*`	Тени	`shadow-sm`
`--breakpoint-*`	Брейкпоинты (варианты)	`tablet:flex`
`--container-*`	Ширины контейнеров	`max-w-md`
`--ease-`, `--animate-`	Кривые и анимации	`ease-out`, `animate-spin`

Полные таблицы значений по умолчанию — в справочниках «Шкалы» и «Палитра».