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

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

⚡ Кратко

Разбор трёх заданий: система статусов, исправленный контраст и читаемый текст поверх фона.

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

Новый В работе На проверке Готово Отменено

<div class="flex flex-wrap gap-2">
  <span class="rounded-full border border-sky-200 bg-sky-100 px-2.5 py-0.5 text-xs font-medium text-sky-800">Новый</span>
  <span class="rounded-full border border-amber-200 bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-800">В работе</span>
  <span class="rounded-full border border-violet-200 bg-violet-100 px-2.5 py-0.5 text-xs font-medium text-violet-800">На проверке</span>
  <span class="rounded-full border border-emerald-200 bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">Готово</span>
  <span class="rounded-full border border-slate-200 bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-700">Отменено</span>
</div>

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

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

было: bg-500 + text-200

стало: bg-500 + white

или: bg-100 + text-900

<div class="space-y-2">
  <div class="rounded-md bg-sky-500 px-3 py-2 text-sm text-sky-200">было: bg-500 + text-200</div>
  <div class="rounded-md bg-sky-500 px-3 py-2 text-sm text-white">стало: bg-500 + white</div>
  <div class="rounded-md bg-sky-100 px-3 py-2 text-sm text-sky-900">или: bg-100 + text-900</div>
</div>

Правило: разница ступеней должна быть большой. Средний фон (500) требует белого текста, светлый (100) — тёмного (800–900). Две соседние ступени вместе не используются никогда.

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

Текст читается всегда

Полупрозрачный слой выравнивает яркость фона.

<div class="relative overflow-hidden rounded-xl">
  <div class="h-40 bg-linear-to-br from-amber-300 via-orange-400 to-rose-500"></div>
  <div class="absolute inset-0 bg-slate-900/40"></div>
  <div class="absolute inset-0 flex flex-col justify-end p-5">
    <h3 class="text-lg font-semibold text-white">Текст читается всегда</h3>
    <p class="text-sm text-white/90">Полупрозрачный слой выравнивает яркость фона.</p>
  </div>
</div>

Почему так: градиент может быть любой яркости, поэтому поверх него кладётся равномерное затемнение. Такой приём надёжнее, чем подбирать цвет текста под конкретную картинку.