Урок 01. Utility-first: что такое Tailwind и зачем

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

⚡ Кратко

Tailwind — это набор маленьких классов-утилит, каждый из которых отвечает ровно за одно CSS-свойство. Вместо того чтобы придумывать имя классу и писать для него правило в отдельном файле, вы собираете внешний вид прямо в разметке: p-5 — внутренний отступ, rounded-xl — скругление, text-sm — размер текста.

  • Не нужно придумывать имена классов и поддерживать растущий CSS-файл.
  • Значения берутся из общей шкалы — интерфейс автоматически согласован.
  • В сборку попадают только те утилиты, которые реально встречены в коде.

О чём этот урок

Урок отвечает на главный вопрос новичка: «почему классы прямо в HTML — это нормально?». Мы разберём, какую конкретную боль решает утилитарный подход, посмотрим на одну и ту же карточку в двух вариантах — на обычном CSS и на Tailwind — и честно перечислим минусы подхода, чтобы вы понимали, за что платите.

Здесь ещё не нужен установленный Tailwind: все примеры на странице — живые, они собраны настоящим Tailwind CSS 4.3. Установкой займёмся в уроке 02.

Предполагается, что вы уже знаете CSS: селекторы, каскад, блочную модель, Flexbox. Если нет — сначала пройдите курс HTML & CSS.

Структура урока

Теория

Что такое утилита, какую проблему решает подход и чем за это платят.

Справочник

Анатомия имени класса и два десятка утилит, которых хватит на первый интерфейс.

Примеры

Одна карточка на обычном CSS и на Tailwind, кнопка, бейджи, список.

Старый vs Новый

BEM против утилит и что изменилось между Tailwind v3 и v4.

Задания

Перевести CSS в утилиты и проверить понимание.

Решения

Разбор с готовым результатом рядом с кодом.

Ошибки

Динамические имена классов, конфликты утилит, инструкции от v3.

Домашнее задание

Карточка профиля на утилитах.

Ресурсы

Документация и полезные ссылки.

Практика

  • Найдите на любимом сайте карточку и перечислите вслух её свойства: отступ, скругление, тень, размер текста.
  • Откройте документацию Tailwind и найдите утилиту для каждого из этих свойств.
  • Сравните два блока кода в разделе «Примеры»: сколько строк CSS вы не написали?

Навигация