Урок 03. Домашнее задание: тема проекта

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

⚡ Кратко

Завести в проекте курса собственную тему: бренд-цвет с несколькими ступенями, именованный размер и свой брейкпоинт. Проверить, что утилиты появились.

Задание

В проекте tailwind-course из урока 02 опишите тему:

  • три ступени фирменного цвета: --color-brand-400/500/600;
  • именованный размер --spacing-header для высоты шапки;
  • брейкпоинт --breakpoint-tablet;
  • страницу, где всё это используется.

Подготовка окружения

cd tailwind-course
npm run dev
Правки в @theme подхватываются на лету — перезапускать сервер не нужно. Если изменения не видны, проверьте, что редактируете тот же CSS-файл, который импортируется в приложении.

Пошаговое решение

Шаг 1. Токены

📄 src/index.css
@import "tailwindcss";

@theme {
  --color-brand-400: oklch(0.68 0.16 264);
  --color-brand-500: oklch(0.55 0.21 264);
  --color-brand-600: oklch(0.48 0.22 264);
  --spacing-header: 4rem;
  --breakpoint-tablet: 60rem;
}

Шаг 2. Использование в разметке

📄 src/App.tsx
<header className="flex h-header items-center justify-between border-b border-slate-200 px-4">
  <span className="text-sm font-semibold text-brand-600">Мой проект</span>
  <nav className="hidden gap-4 text-sm tablet:flex">
    <a className="text-slate-600 hover:text-brand-500" href="#">Обзор</a>
    <a className="text-slate-600 hover:text-brand-500" href="#">Отчёты</a>
  </nav>
</header>

Шаг 3. Проверка сгенерированного CSS

npm run build
grep "text-brand-600" dist/assets/*.css

Правило должно найтись. Если его нет — класс не встречается в исходниках целиком либо файл лежит вне сканирования.

Шаг 4. Эксперимент со сбросом

Временно добавьте --color-*: initial; первой строкой блока @theme и посмотрите, что сломается. Это наглядно показывает, сколько утилит вы используете «по умолчанию». Затем верните как было.

Как проверить

  • Шапка занимает ровно 4rem по высоте (h-header).
  • Меню скрыто на узком экране и появляется от 960px (tablet:flex).
  • Ссылки при наведении становятся фирменного цвета.
  • В DevTools у элемента видно var(--color-brand-500), а не хардкод.

Ожидаемый результат (кнопка использует бренд-токен курса):

Мой проект 
<header class="flex h-16 items-center justify-between rounded-lg border border-slate-200 bg-white px-4">
  <span class="text-sm font-semibold text-brand">Мой проект</span>
  <nav class="flex gap-4 text-sm">
    <a class="text-slate-600 hover:text-brand" href="#">Обзор</a>
    <a class="text-slate-600 hover:text-brand" href="#">Отчёты</a>
  </nav>
</header>