Урок 03. Примеры: своя тема

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

⚡ Кратко

Четыре примера: свой цвет, свой размер, свой брейкпоинт и сброс палитры. Каждый показывает, что именно появляется в сгенерированном CSS.

1. Свой цвет бренда

📄 src/style.css

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.55 0.21 264);
  --color-brand-600: oklch(0.48 0.22 264);
}

Что получилось в CSS:

.bg-brand-500  { background-color: var(--color-brand-500); }
.text-brand-500 { color: var(--color-brand-500); }
.border-brand-500 { border-color: var(--color-brand-500); }
/* и так далее — для всех цветовых утилит */

И как это выглядит на странице (здесь используется токен --brand демонстраций курса):

<button class="rounded-md bg-brand px-4 py-2 text-sm font-medium text-brand-foreground hover:opacity-90">
  Кнопка бренда
</button>

2. Свой размер в шкале отступов

@theme {
  --spacing-huge: 7.5rem;
}

<section class="py-huge">…</section>

Именованный размер удобен для «фирменных» величин: высота шапки, отступ секции лендинга, ширина сайдбара. Всё остальное лучше брать из обычной шкалы.

3. Свой брейкпоинт

@theme {
  --breakpoint-tablet: 60rem;
}

<div class="grid grid-cols-1 tablet:grid-cols-3">…</div>

Токен --breakpoint-* порождает не утилиту, а вариант: появляется приставка tablet:, работающая как встроенные sm:, md:, lg:.

4. Только фирменная палитра

@theme {
  --color-*: initial;
  --color-white: #fff;
  --color-ink: oklch(0.2 0 0);
  --color-brand: oklch(0.55 0.21 264);
}

После этого bg-red-500 перестанет существовать: движок не найдёт токен и не сгенерирует правило. Приём жёсткий, но честный — он физически запрещает «цвет мимо системы».

Сбрасывая палитру, не забудьте про цвета, которые нужны компонентам: состояния ошибок, предупреждений, успеха. Иначе они окажутся недоступны в самый неподходящий момент.

5. Проверка сканирования

Положим шаблон вне области автоопределения и подключим его вручную:

@import "tailwindcss";
@source "../backend/templates";

# убеждаемся, что класс из шаблона попал в сборку
npx @tailwindcss/cli -i ./src/style.css -o ./dist/out.css
grep "text-emerald-600" ./dist/out.css

Если grep ничего не нашёл — путь указан неверно либо каталог игнорируется гитом. Это самая быстрая диагностика проблем со сканированием.