Tailwind или CSS-модули: как организовать стили во фронтенде

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

Разберём, какие проблемы возникают со стилями, чем отличаются подходы и как выбрать.

Какие проблемы бывают со стилями в больших проектах?

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

• конфликты имён — новый класс случайно меняет вид другой страницы;
• мёртвый CSS — стили остаются после удаления компонентов, файл растёт;
• несогласованность — двадцать оттенков серого и отступы «на глаз»;
• специфичность — борьба !important и вложенных селекторов;
• страх изменений — непонятно, что сломается, если поправить общий стиль.

Чем отличаются подходы к стилям?

Основные подходы различаются тем, где живут стили, как они изолируются и как попадают в браузер.

Подход	Как устроен	Плюсы	Минусы
Tailwind	Утилитарные классы в разметке	Быстро, согласованно, CSS не растёт	Длинные списки классов, нужна привычка
CSS-модули	CSS-файл рядом с компонентом, имена изолированы	Обычный CSS, изоляция, гибкость	Значения нужно брать из переменных вручную
BEM	Соглашение об именах классов	Без инструментов	Изоляция держится на дисциплине
CSS-in-JS во время работы	Стили генерируются JavaScript	Динамика, всё в одном файле	Лишний JavaScript, проблемы с SSR
CSS-in-JS при сборке	Стили извлекаются в CSS при сборке	Типизация и изоляция без затрат	Меньше экосистема

Фото: Unsplash

Как работает Tailwind?

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

<button class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white
               hover:bg-brand-700 focus-visible:outline-2 disabled:opacity-50">
  Оформить заказ
</button>

Сильные стороны:

1. Нельзя случайно сломать соседний компонент — стили привязаны к элементу.
2. Отступы и цвета берутся из ограниченной шкалы — интерфейс остаётся согласованным.
3. При удалении компонента его стили исчезают вместе с ним.
4. Адаптивность и состояния — прямо в разметке: md:, hover:, dark:.

Повторяющиеся сочетания классов выносят не в CSS, а в компоненты: кнопку, карточку, поле ввода.

Когда лучше CSS-модули?

CSS-модули удобнее, когда команда хорошо знает CSS, компоненты сложные и нестандартные — анимации, сложные сетки, иллюстрации, — или проект уже написан на обычном CSS и SCSS. Имена классов автоматически становятся уникальными, так что конфликты исключены, а писать можно на привычном CSS.

• держите значения в CSS-переменных — это ваши дизайн-токены;
• один модуль на компонент, без глобальных стилей внутри;
• общие стили — только сброс, типографика и переменные;
• используйте линтер для стилей, чтобы ловить захардкоженные цвета и отступы.

Что выбрать команде?

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

• новый продукт с типовым интерфейсом и дизайн-системой — Tailwind;
• сложная анимированная вёрстка, сильные верстальщики — CSS-модули;
• большой существующий проект на SCSS — CSS-модули и постепенное введение токенов;
• не смешивайте больше двух подходов в одном проекте.

Подробнее о дизайн-системах — статья дизайн-система: когда нужна, а о скорости фронтенда — Core Web Vitals. О доступности интерфейса — статья доступность сайта.

Коротко

• Проблемы стилей — конфликты имён, мёртвый CSS и несогласованные значения.
• Tailwind — утилиты в разметке, согласованность и небольшой итоговый CSS.
• CSS-модули — обычный CSS с изоляцией, удобны для сложных компонентов.
• CSS-in-JS во время работы добавляет JavaScript и выбирается всё реже.
• Важнее инструмента — общие дизайн-токены и единые договорённости в команде.