Урок 01. Задания

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

⚡ Кратко

Три задания на перевод CSS в утилиты и четыре вопроса на понимание. Решения — на соседней странице, но сначала попробуйте сами.

Задания

Задание 1. Перевести правило в утилиты

Дано правило CSS. Запишите тот же результат набором классов Tailwind.

.note {
  padding: 1rem;
  border-radius: 0.5rem;
  background: #dbeafe;   /* blue-100 */
  color: #1e3a8a;        /* blue-900 */
  font-size: 0.875rem;
}

Ожидаемый результат: синий блок с текстом, отступ 16px, скругление 8px, мелкий текст.

Задание 2. Шапка с логотипом и кнопкой

Соберите строку: слева текст «Панель», справа кнопка «Выйти», между ними — свободное место. Высота строки задаётся вертикальными отступами, снизу — рамка.

Подсказка: понадобятся flex, items-center, justify-between, px-*, py-*, border-b.

Задание 3. Найти лишнее

В строке классов есть противоречие. Найдите его и объясните, какой класс победит и почему.

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

Проверка понимания

Выберите один вариант ответа — правильный подсветится после клика.

Вопрос 1

Что делает класс p-4?

Вопрос 2

Почему итоговый CSS-файл Tailwind получается небольшим?

Вопрос 3

Какой из способов записать цвет фона не сработает?

Вопрос 4

Что заменило tailwind.config.js в Tailwind v4?