Урок 01. Решения

Решение задания 1

<div class="rounded-lg bg-blue-100 p-4 text-sm text-blue-900">
  Ключ действителен ещё 14 дней
</div>

Почему так: p-4 = 1rem (шкала: 4 × 0.25rem), rounded-lg = 0.5rem, bg-blue-100 и text-blue-900 — те же оттенки палитры, что были записаны шестнадцатеричным кодом, text-sm = 0.875rem. Обратите внимание: цвет текста и фона взяты из одной цветовой группы — это даёт предсказуемый контраст.

Решение задания 2

<header class="flex items-center justify-between border-b border-slate-200 px-4 py-3">
  <span class="text-sm font-semibold text-slate-900">Панель</span>
  <button class="rounded-md border border-slate-200 px-3 py-1.5 text-sm text-slate-700 hover:bg-slate-50">
    Выйти
  </button>
</header>

Почему так: flex ставит элементы в строку, items-center выравнивает их по вертикали, justify-between разводит по краям — распорка между ними не нужна. Высота шапки получается из py-3, а не из height: так строка не сломается, если текст станет крупнее.

Решение задания 3

В строке p-4 p-8 text-sm text-lg два конфликта: два отступа и два размера текста. Победит не последний класс в атрибуте, а тот, чьё правило идёт ниже в сгенерированном CSS-файле — порядок в атрибуте class браузеру безразличен.

Правильно — оставить по одному классу на свойство:

<div class="p-4 text-sm">Текст</div>

Когда классы приходят из разных мест (базовые классы компонента плюс className снаружи), конфликт разруливают функцией tailwind-merge — это тема урока 15.