Урок 01. Справочник: анатомия класса и базовые утилиты

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

⚡ Кратко

Имя утилиты читается по схеме вариант:свойство-значение: md:hover:bg-slate-100 — «на экранах от md, при наведении, фон slate-100». Ниже — минимальный набор утилит, которого хватает на первую страницу.

Анатомия имени класса

<button class="md:hover:bg-slate-900/80">
         │   │     │  │      │   └── прозрачность 80%
         │   │     │  │      └────── ступень палитры
         │   │     │  └───────────── цвет
         │   │     └──────────────── свойство (background-color)
         │   └────────────────────── состояние (hover)
         └────────────────────────── брейкпоинт (от 768px)

Порядок частей фиксирован: сначала варианты (их может быть несколько), потом сама утилита. Варианты подробно разбираются в уроке 12, брейкпоинты — в уроке 11.

Словарь урока

Термин	Что значит	Пример
Утилита	Класс, отвечающий за одно CSS-свойство	`p-4` → `padding: 1rem`
Вариант (модификатор)	Приставка, ограничивающая применение утилиты	`hover:`, `md:`, `dark:`
Шкала	Набор допустимых значений темы	`1`=0.25rem, `4`=1rem
Произвольное значение	Значение вне шкалы, в квадратных скобках	`w-[37px]`
Preflight	Встроенный сброс браузерных стилей	убирает `margin` у `h1`
Реестр (shadcn)	Каталог исходников компонентов для копирования	`npx shadcn add button`

Двадцать утилит для старта

Класс	CSS	Зачем
`flex`	`display: flex`	Горизонтальная раскладка
`grid`	`display: grid`	Сетка
`hidden`	`display: none`	Скрыть элемент
`items-center`	`align-items: center`	Выравнивание по поперечной оси
`justify-between`	`justify-content: space-between`	Развести по краям
`gap-4`	`gap: 1rem`	Промежуток между элементами
`p-4` / `px-3` / `py-2`	`padding` со всех сторон / по горизонтали / по вертикали	Внутренние отступы
`m-0` / `mt-4`	`margin` / `margin-top`	Внешние отступы
`w-full`	`width: 100%`	Растянуть по ширине
`max-w-sm`	`max-width: 24rem`	Ограничить ширину блока
`text-sm`	`font-size: 0.875rem` + парный `line-height`	Размер текста
`font-semibold`	`font-weight: 600`	Начертание
`text-slate-600`	`color: …`	Цвет текста
`bg-white`	`background-color: #fff`	Фон
`border`	`border-width: 1px`	Рамка (цвет — отдельным классом)
`border-slate-200`	`border-color: …`	Цвет рамки
`rounded-lg`	`border-radius: 0.5rem`	Скругление
`shadow-sm`	`box-shadow: …`	Тень
`hover:bg-slate-100`	то же при `:hover`	Состояние наведения
`md:flex`	то же от 768px	Адаптивность

Полная шпаргалка по группам утилит — в справочнике «Шпаргалка утилит», значения шкал — в «Шкалы».

Как искать нужную утилиту

Сформулируйте свойство на языке CSS: «мне нужен justify-content: center».
Ищите по имени свойства в документации — она устроена по свойствам CSS.
Проверьте в браузере: наведите на класс в DevTools и посмотрите сгенерированное правило.