Урок 01. Примеры: от CSS-файла к утилитам

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

⚡ Кратко

Ниже одна и та же карточка двумя способами и ещё три типовых блока. Все примеры на странице — настоящий Tailwind: результат сверху собран из тех же классов, что показаны в коде.

1. Карточка: обычный CSS против утилит

Сначала привычный подход — разметка плюс отдельный файл стилей.

<!-- index.html -->
<div class="product-card">
  <h3 class="product-card__title">Отчёт готов</h3>
  <p class="product-card__text">Данные за июль обновлены пять минут назад.</p>
  <button class="product-card__button">Открыть</button>
</div>

/* styles.css — 22 строки, которые нужно написать и потом поддерживать */
.product-card {
  max-width: 24rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.product-card__title { font-size: 1rem; font-weight: 600; color: #0f172a; }
.product-card__text  { margin-top: 0.25rem; font-size: 0.875rem; color: #475569; }
.product-card__button {
  margin-top: 1rem;
  border-radius: 0.375rem;
  background: #0f172a;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}
.product-card__button:hover { background: #334155; }

А теперь то же самое на утилитах — без единой строки CSS:

Отчёт готов

Данные за июль обновлены пять минут назад.

<div class="max-w-sm rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
  <h3 class="text-base font-semibold text-slate-900">Отчёт готов</h3>
  <p class="mt-1 text-sm text-slate-600">Данные за июль обновлены пять минут назад.</p>
  <button class="mt-4 rounded-md bg-slate-900 px-3 py-2 text-sm font-medium text-white hover:bg-slate-700">
    Открыть
  </button>
</div>

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

2. Кнопка с состояниями

Наведите курсор и нажмите Tab — состояния тоже описываются утилитами.

<button class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white
               transition-colors hover:bg-indigo-500
               focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
  Сохранить
</button>

3. Бейджи статусов

Один и тот же набор утилит, отличается только цвет — так выглядит «вариант» компонента до того, как вы вынесете его в код (урок 15).

Готово В работе Ошибка Черновик

<div class="flex flex-wrap gap-2">
  <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-800">Готово</span>
  <span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-800">В работе</span>
  <span class="rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-800">Ошибка</span>
  <span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-700">Черновик</span>
</div>

4. Список с разделителями

divide-y ставит границу между соседями — не нужен ни :last-child, ни отдельный класс для последней строки.

Отчёты 12
Задачи 5
Архив 108

<ul class="max-w-sm divide-y divide-slate-200 rounded-lg border border-slate-200 bg-white">
  <li class="flex items-center justify-between px-4 py-3 text-sm">
    <span class="text-slate-700">Отчёты</span>
    <span class="text-slate-400">12</span>
  </li>
  <li class="flex items-center justify-between px-4 py-3 text-sm">
    <span class="text-slate-700">Задачи</span>
    <span class="text-slate-400">5</span>
  </li>
  <li class="flex items-center justify-between px-4 py-3 text-sm">
    <span class="text-slate-700">Архив</span>
    <span class="text-slate-400">108</span>
  </li>
</ul>

5. Тёмная тема одной приставкой

Нажмите 🌙 в правом нижнем углу страницы: демо ниже переключится вместе с ней, потому что классы с приставкой dark: срабатывают, когда на странице включена тёмная тема.

Тёмная тема

Один и тот же блок, два набора цветов.

<div class="max-w-sm rounded-xl border border-slate-200 bg-white p-5
            dark:border-slate-700 dark:bg-slate-900">
  <h3 class="text-base font-semibold text-slate-900 dark:text-slate-50">Тёмная тема</h3>
  <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
    Один и тот же блок, два набора цветов.
  </p>
</div>

Эксперимент: откройте DevTools (F12), выберите любой элемент из примеров и посмотрите вкладку Styles — вы увидите обычные CSS-правила вида .p-5 { padding: 1.25rem; }. Никакой магии во время выполнения нет.