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

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

⚡ Кратко

Три решения с готовым результатом и пояснением выбора классов.

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

Релиз

Версия 4.3 доступна всем

Обновление приносит новые утилиты и ускоренную сборку.

20 августа 2026

<div class="max-w-md">
  <p class="text-xs font-semibold uppercase tracking-widest text-indigo-700">Релиз</p>
  <h2 class="mt-1 text-2xl font-semibold tracking-tight text-slate-900">Версия 4.3 доступна всем</h2>
  <p class="mt-2 text-base leading-relaxed text-slate-600">
    Обновление приносит новые утилиты и ускоренную сборку.
  </p>
  <p class="mt-3 text-xs text-slate-400">20 августа 2026</p>
</div>

Почему так: четыре уровня отличаются одновременно размером, весом и цветом. Цветов ровно три — тёмный для главного, серый для текста, светло-серый для служебного.

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

Отчёт по продажам за третий квартал 2026 года.pdf

2,4 МБ

<div class="flex w-80 items-center gap-3 rounded-lg border border-slate-200 p-3">
  <div class="size-10 shrink-0 rounded-md bg-slate-200"></div>
  <div class="min-w-0">
    <p class="truncate text-sm font-medium text-slate-900">Отчёт по продажам за третий квартал 2026 года.pdf</p>
    <p class="text-xs text-slate-500">2,4 МБ</p>
  </div>
</div>

Почему так: shrink-0 запрещает иконке сжиматься, min-w-0 разрешает текстовому блоку стать уже содержимого — без этой пары truncate не сработает внутри flex.

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

Ограничение ширины делает чтение комфортным: строка заканчивается там, где взгляд ещё помнит её начало. Увеличенный межстрочный интервал добавляет воздуха, а text-pretty следит за тем, чтобы последняя строка абзаца не состояла из одного короткого слова. 

<p class="max-w-prose text-base leading-relaxed text-pretty text-slate-700">
  Ограничение ширины делает чтение комфортным: строка заканчивается там, где взгляд
  ещё помнит её начало. Увеличенный межстрочный интервал добавляет воздуха, а
  text-pretty следит за тем, чтобы последняя строка абзаца не состояла из одного
  короткого слова.
</p>

Почему так: max-w-prose — примерно 65 знаков, leading-relaxed — интервал 1.625, text-pretty — аккуратные переносы. Три класса решают всю задачу.