Что такое Tailwind CSS и что означает подход «utility-first»?

Что такое Tailwind CSS

Tailwind CSS — CSS-фреймворк с подходом «utility-first». Вместо написания собственных CSS-классов с семантическими именами (.card, .btn-primary) разработчик применяет небольшие, однозадачные утилитарные классы прямо в HTML. Каждый такой класс делает ровно одно CSS-свойство: flex, mt-4, text-center, bg-blue-500.

Подход utility-first

В традиционном CSS вы пишете семантические классы:

/* Традиционный подход */
.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 16px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

В Tailwind те же стили пишутся через утилитарные классы в HTML:

<!-- Tailwind utility-first -->
<div class="bg-white rounded-lg p-4 shadow-md mb-4">
  <h2 class="text-lg font-semibold mb-2">Заголовок карточки</h2>
  <p class="text-gray-600 text-sm">Описание</p>
</div>

Установка и настройка

# Tailwind CSS v4 (актуальная версия)
npm install tailwindcss @tailwindcss/vite

/* globals.css */
@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-sans: 'Inter', sans-serif;
}

Адаптивный дизайн и состояния

<!-- Breakpoints: sm: md: lg: xl: 2xl: -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Состояния: hover: focus: active: disabled: -->
  <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700
                 text-white font-medium px-4 py-2 rounded-md
                 focus-visible:outline-2 focus-visible:outline-blue-500
                 disabled:opacity-50 disabled:cursor-not-allowed
                 transition-colors duration-200">
    Нажми меня
  </button>
</div>

Произвольные значения

<!-- Квадратные скобки для произвольных значений -->
<div class="w-[342px] h-[200px] bg-[#1a1a2e] mt-[13px]">
  <p class="text-[15px] leading-[1.6] text-[rgb(255,255,255,0.8)]">
    Произвольные значения
  </p>
</div>

Преимущества utility-first

• Нет роста CSS: все стили уже есть в Tailwind, новые компоненты не добавляют новый CSS — только переиспользуют утилиты.
• Нет придумывания имён: не нужно называть .card-wrapper-inner-content.
• Локальность изменений: стили и разметка в одном месте, не нужно переключаться между HTML и CSS файлами.
• Маленький production-бандл: Tailwind сканирует исходники и включает только используемые утилиты — обычно 5–30 KB.

Подводные камни

• Длинные строки классов ухудшают читаемость HTML — используйте компоненты (React/Vue) или утилиту clsx/cn для условных классов.
• Динамические классы (шаблонные строки типа `bg-${color}-500`) не проходят через content-scanner и вырезаются из production-бандла.
• Без линтера легко написать конфликтующие классы (flex block) — используйте eslint-plugin-tailwindcss или prettier-plugin-tailwindcss для сортировки и проверки.
• @apply в больших объёмах сводит на нет преимущества utility-first и дублирует специфичность CSS.
• Tailwind v4 несовместим с конфигурацией v3 (tailwind.config.js) — при обновлении нужна ручная миграция токенов в @theme.
• Произвольные значения в квадратных скобках стоит избегать — они выпадают из design system и не переиспользуются.
• Тёмная тема через dark: по умолчанию работает через prefers-color-scheme, а не CSS-класс — для управляемого переключения нужен darkMode: 'class'.
• Большое количество утилит в базовых компонентах (кнопки, инпуты) нужно абстрагировать в переиспользуемые React/Vue-компоненты, иначе изменение стиля кнопки требует правки во всём проекте.

• Смешивать «Tailwind CSS и utility-first» с похожим механизмом без критерия выбора.
• Игнорировать риск: неверно оценить границы применения темы «Tailwind CSS и utility-first» и получить хрупкое решение.
• Показывать только синтаксис и не объяснять поведение в runtime или сборке.

• Объясняет сборка интерфейса из маленьких атомарных классов вместо написания большого слоя custom CSS.
• Показывает на примере, как работает: Tailwind сканирует исходники, находит используемые utility-классы и генерирует только нужный CSS; классы являются API поверх design tokens.
• Называет production-нюанс и граничный случай для темы «Tailwind CSS и utility-first».