Utility-first и раскладка
Зачем утилитарные классы, шкала, flex/grid и произвольные значения.
Обновлено
Что такое Tailwind
Tailwind CSS — CSS-фреймворк в стиле utility-first: вместо того чтобы писать CSS-правила в отдельном файле и придумывать имена классов (.card-header-title), вы собираете стиль из маленьких классов с одной задачей (p-4, text-lg, flex) прямо в разметке.
Каждый класс = одно CSS-объявление: p-4 → padding: 1rem, flex → display: flex, text-muted → color: var(--color-muted). При сборке Tailwind сканирует файлы и генерирует CSS только для используемых классов.
Подходы к стилизации — сравнение
| Подход | Как | Плюсы | Минусы |
|---|---|---|---|
| классический CSS / BEM | .card__title в .css |
стандарт, без инструментов | имена нужно придумывать, CSS растёт, мёртвый код |
| CSS Modules | styles.title, область видимости по файлу |
без конфликтов имён | всё равно пишете и называете CSS отдельно |
| CSS-in-JS | styled.div |
динамические стили в JS | стоимость в рантайме, проблемы с Server Components |
| Tailwind | утилитарные классы в разметке | быстро, единообразно, маленький CSS, ноль мёртвого кода | длинная разметка, кривая обучения |
Идея на примере
<button class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
Сохранить
</button>Плюсы: не нужно придумывать имена, CSS не растёт бесконечно (классы переиспользуются), удалили компонент → его стиль исчез вместе с ним, единообразный дизайн (фиксированная шкала).
Минусы: длинная разметка, нужно выучить имена. Решается компонентами, а не @apply.
Установка v4
/* app/globals.css */
@import "tailwindcss";Без tailwind.config.js — настройка делается в CSS (@theme). Классы находятся автоматически в файлах проекта.
Шкала — думайте шагами, а не пикселями
| Класс | Значение |
|---|---|
p-1 / p-2 / p-4 |
0.25rem / 0.5rem / 1rem |
gap-6 |
1.5rem |
text-sm / text-base / text-xl |
14 / 16 / 20px |
w-1/2, w-full, max-w-3xl |
ширина |
size-10 |
ширина + высота |
Произвольное значение, когда без него никак: w-[327px], grid-cols-[220px_1fr], bg-[#1f5fbf].
Раскладка на каждый день
<div class="flex items-center justify-between gap-4">...</div>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">...</div>
<main class="mx-auto max-w-6xl px-4">...</main>Порядок классов
Используйте официальный плагин prettier-plugin-tailwindcss — он сортирует классы автоматически, и думать об этом не нужно.
Коротко
- Tailwind = утилитарные классы, по одному на свойство, генерируются, только если используются.
- Настройка в CSS (
@theme), без JS-файла в v4. - Думаете шкалой отступов; произвольные значения — только как исключение.