Tailwind CSS: утилитарный подход

Tailwind CSS — utility-first: мелкие атомарные классы (flex, p-4, text-slate-600) компонуются в разметке; дизайн-токены через tailwind.config. Отличие от «семантических» CSS-модулей — скорость прототипирования и единая шкала. Сборка — Webpack и Vite.

---

1. JIT и tree-shaking

Современный Tailwind генерирует только используемые классы (content paths в config указывают на *.tsx, *.vue).

---

2. Кастомизация

theme.extend, плагины (@tailwindcss/forms, typography), darkMode: 'class'|'media'`.

@layer base / components / utilities — порядок генерации CSS: в base кладите сбросы и дефолты для html/body, в components — карточки и кнопки через @apply, в utilities — редкие кастомные утилиты. Так вы не перебиваете встроенные утилиты случайным порядком в одном файле.

---

3. @apply

Для повторяющихся связок можно @apply в слое компонентов; не злоупотреблять — теряется явность утилит.

---

4. Компонентный UI

Headless UI, Radix, shadcn/ui (копируемые компоненты) хорошо сочетаются с Tailwind.

---

5. Конфиг tailwind.config

Масштаб spacing, fontSize, палитра colors — единый источник правды для дизайн-системы. screens для брейкпоинтов; container с center и padding для лэйаута. После изменения config перезапустите dev-сервер.

---

6. Responsive и состояние

Префиксы sm:, md:, lg: — mobile-first: базовый стиль без префикса, затем расширения. hover:, focus-visible:, disabled: — не забывайте клавиатурную навигацию и контраст для focus.

---

7. Производительность

Избегайте тысяч уникальных arbitrary-значений в классах — раздувается CSS. Для анимаций предпочитайте transform и opacity. В проде включайте purge/content на все пути к шаблонам, иначе в бандл попадут лишние утилиты.

---

8. Чек-лист

• Prettier plugin для сортировки классов.
• Дизайн-система: ограничить произвольные px-[].
• a11y — утилиты не заменяют семантику (button vs div).
• Проверка контраста цветов (WCAG) для text-* на bg-*.
• Safelist только осознанно — иначе снова раздувание CSS.

---

Дальше: тег «Фронтенд»