Урок 05. Домашнее задание: страница статьи

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

⚡ Кратко

Сверстать страницу статьи: обложка-заголовок, лид, два подзаголовка, абзацы, цитата и подпись автора. Только утилиты типографики и отступов.

Задание

Добавьте в проект курса страницу статьи со следующими требованиями:

  • ширина текстовой колонки ограничена комфортной длиной строки;
  • заголовок статьи — крупный, с плотным трекингом и text-balance;
  • лид-абзац крупнее основного текста и другого цвета;
  • два подзаголовка второго уровня;
  • цитата с боковой полосой;
  • подпись автора и дата мелким текстом;
  • ссылки в тексте видно без наведения.

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

cd tailwind-course
npm run dev

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

Шаг 1. Колонка

mx-auto max-w-2xl px-4 py-12 — колонка по центру с полями. Внутри всё наследует эту ширину, отдельные ограничения не нужны.

Шаг 2. Шапка статьи

Надзаголовок: text-xs font-semibold uppercase tracking-widest. Заголовок: text-4xl font-semibold tracking-tight text-balance. Лид: mt-4 text-lg leading-relaxed text-slate-600.

Шаг 3. Тело статьи

Подзаголовки — mt-8 text-xl font-semibold, абзацы — mt-4 text-base leading-relaxed text-slate-700. Ссылки — underline decoration-2 underline-offset-4.

Шаг 4. Цитата и подпись

Цитата: border-l-4 pl-4 italic. Подпись: text-xs text-slate-500.

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

  • Строка основного текста — не длиннее 75 знаков на широком экране.
  • Между заголовком и текстом видна иерархия по размеру, весу и цвету.
  • Заголовок не оставляет одинокое слово на последней строке.
  • На 320px текст не выходит за экран и не рвётся посреди слова.

Ориентир

Практика

Как типографика делает интерфейс понятным

Три инструмента — размер, вес и цвет — решают почти любую задачу иерархии.

Длина строки

Ограничьте колонку, и текст станет читаться легче без единого изменения шрифта. Подробности — в документации.

Читатель не замечает хорошую типографику — он просто дочитывает до конца.

Автор: студент курса · 20 августа 2026

<article class="mx-auto max-w-2xl">
  <p class="text-xs font-semibold uppercase tracking-widest text-sky-700">Практика</p>
  <h1 class="mt-2 text-3xl font-semibold tracking-tight text-balance text-slate-900">
    Как типографика делает интерфейс понятным
  </h1>
  <p class="mt-4 text-lg leading-relaxed text-slate-600">
    Три инструмента — размер, вес и цвет — решают почти любую задачу иерархии.
  </p>
  <h2 class="mt-8 text-xl font-semibold text-slate-900">Длина строки</h2>
  <p class="mt-3 text-base leading-relaxed text-slate-700">
    Ограничьте колонку, и текст станет читаться легче без единого изменения шрифта.
    Подробности — в <a class="font-medium text-sky-700 underline decoration-2 underline-offset-4" href="#">документации</a>.
  </p>
  <blockquote class="mt-6 border-l-4 border-slate-300 pl-4 text-base italic text-slate-800">
    Читатель не замечает хорошую типографику — он просто дочитывает до конца.
  </blockquote>
  <p class="mt-6 text-xs text-slate-500">Автор: студент курса · 20 августа 2026</p>
</article>