Что такое utility-first и зачем это нужно

Разбираемся, что значит «utility-first» и почему дизайн собирают прямо в разметке.

Utility-first — подход, при котором интерфейс собирается из множества мелких классов-утилит, каждый из которых задаёт одно CSS-свойство.

Привычный путь: семантические классы

Обычно мы пишем разметку с «говорящими» именами классов, а сами стили выносим в отдельный CSS-файл. Например, карточка товара:

<div class="card">
  <h3 class="card__title">Тариф Pro</h3>
  <p class="card__price">990 ₽</p>
</div>

.card {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.card__title { font-size: 18px; font-weight: 600; }
.card__price { color: #16a34a; }

Подход рабочий, но у него есть скрытая цена: нужно придумывать имена классов, постоянно прыгать между HTML и CSS, а сам CSS-файл со временем только растёт — старые правила боятся удалять, потому что неясно, где они ещё используются.

Путь Tailwind: утилиты в разметке

Tailwind предлагает не выдумывать имена, а собрать тот же вид из готовых классов прямо в HTML. Каждый класс отвечает за одно свойство: p-4 — это padding: 1rem, rounded-lg — скругление углов, shadow — тень.

<div class="p-4 rounded-lg shadow">
  <h3 class="text-lg font-semibold">Тариф Pro</h3>
  <p class="text-green-600">990 ₽</p>
</div>

Визуально результат тот же самый: карточка с внутренними отступами в 16 пикселей, скруглёнными углами и лёгкой тенью; заголовок крупнее и полужирный; цена — зелёного цвета. Но мы не написали ни строчки CSS и не придумали ни одного имени класса.

Почему это удобно

Не нужно придумывать имена. Самая мучительная часть CSS — нейминг — просто исчезает.
Всё в одном месте. Глядя на разметку, вы сразу видите весь её вид, не открывая отдельный файл.
CSS не растёт бесконтрольно. Вы переиспользуете одни и те же утилиты, а не плодите новые правила.
Удаление безопасно. Удалили блок разметки — удалились и его стили, ничего «осиротевшего» в CSS не осталось.

Это не инлайн-стили

Может показаться, что утилиты — это те же style="...", только сбоку. Но разница принципиальная. Утилиты привязаны к единой дизайн-системе: p-4 всегда даёт один и тот же отступ во всём проекте, цвета берутся из общей палитры, а не из случайных значений. Кроме того, утилиты умеют то, что инлайн-стили не могут: адаптивность (md:p-8) и состояния (hover:bg-blue-700). Об этом — в следующих разделах.

Итог

Utility-first — это сборка вида из мелких одно-свойственных классов прямо в разметке.
Вы перестаёте писать собственный CSS и придумывать имена классов.
Утилиты опираются на единую дизайн-систему и умеют адаптивность и состояния — в отличие от инлайн-стилей.