Контакт

Tailwind или свой CSS: какой подход выбрать

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

Стек и технологии Обновлено

Коротко

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

Коротко: что выбрать

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

Оба подхода стоят на одном фундаменте — токенах дизайна. В Tailwind 4 они живут в блоке @theme и становятся CSS-переменными; в своём CSS они CSS-переменные с самого начала. Кто держит цвета, отступы и шрифты в одном месте, тот выигрывает с любым инструментом.

  • Ваша команда на Tailwind — Tailwind
  • Уникальный дизайн, долгая жизнь — свой CSS
  • В любом случае — сначала токены

Tailwind и свой CSS: подробное сравнение

Двенадцать критериев рядом. Размеры файлов измерены на одной и той же карточке, собранной обоими способами.

КритерийTailwindСвой CSS
Где живут стили классы в разметке отдельные файлы по компонентам
Разметка длинные строки классов короткие имена по смыслу
Старт проекта очень быстрый, шкала готова сначала настраиваются токены
Токены в @theme, становятся CSS-переменными CSS-переменные с самого начала
Единообразие держится шкалой держится токенами и дисциплиной
CSS для одной карточки 7,1 КБ, 2,3 КБ gzip 0,9 КБ, 0,4 КБ gzip
Рост вместе с сайтом медленный, классы переиспользуются с каждым компонентом
Современный CSS через варианты: @container, has-[…] напрямую и целиком
Сборка обязательна по желанию
Уникальный дизайн возможен, но спорит со шкалой естественен
Новый разработчик уже знает словарь изучает систему проекта
Зависимость от инструмента и его версий только от браузера

Какой подход под какой проект

Десять типичных ситуаций с рекомендацией и причиной.

СитуацияБратьПочему
Проект уходит вашей команде на Tailwind Tailwind она поддерживает его в своём словаре
Админка или внутренний инструмент Tailwind много типовых экранов, скорость важнее уникальности
Прототип для проверки Tailwind готовая шкала экономит дни
Корпоративный сайт со своим стилем Свой CSS дизайн не собирается из типовой шкалы
Премиальный бренд, много движения Свой CSS анимацию и детали проще писать напрямую
Сайт без сборки Свой CSS Tailwind нужна сборка
Дизайн-система для нескольких продуктов Свой CSS на токенах токены переживают любой фреймворк
Приложение на React любой оба работают, решает команда
Шаблоны писем Свой CSS почтовым программам всё равно нужны встроенные стили
Существующий проект то, на чём он уже две системы в одном проекте хуже любой из них

Одна карточка, два подхода

Одна и та же карточка товара на Tailwind 4 и на своём CSS с теми же токенами. Обе сборки открыты в браузере и выглядят одинаково.

Tailwind: токены

В Tailwind 4 настройки переехали из файла JavaScript в CSS.

app.css 
@import "tailwindcss";

/* Токены проекта: Tailwind 4 превращает их в CSS-переменные
   и в классы вроде text-ink, bg-ink, border-line */
@theme {
  --color-ink: #171817;
  --color-muted: #5f625f;
  --color-line: #e2e3e1;
}

Tailwind: карточка

Каждый стиль — класс в разметке; наведение и фокус — варианты тех же классов.

card.html 
<article class="max-w-sm rounded-lg border border-line bg-white p-6">
  <h3 class="text-lg font-semibold tracking-tight text-ink">Дубовый стол</h3>
  <p class="mt-2 text-sm text-muted">Массив дуба, 160 × 90 см</p>
  <a href="/catalog/oak-table"
     class="mt-6 inline-flex min-h-11 items-center rounded-md bg-ink px-5
            text-sm font-medium text-white transition-colors hover:bg-ink/80
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink">
    Подробнее
  </a>
</article>

Свой CSS: карточка

Разметка говорит, что это за элемент; как он выглядит, решает файл стилей.

card.html 
<article class="card">
  <h3 class="card__title">Дубовый стол</h3>
  <p class="card__text">Массив дуба, 160 × 90 см</p>
  <a class="card__link" href="/catalog/oak-table">Подробнее</a>
</article>

Свой CSS: токены и компонент

Те же токены в виде CSS-переменных и один компонент. В сжатом виде — 0,9 КБ; файл Tailwind для этой карточки — 7,1 КБ, около половины из них сброс стилей.

card.css 
/* Токены проекта: цвета, отступы и радиусы в одном месте */
:root {
  --color-ink: #171817;
  --color-muted: #5f625f;
  --color-line: #e2e3e1;
  --space-2: 0.5rem;
  --space-6: 1.5rem;
  --radius: 0.5rem;
}

/* Компонент: имена классов говорят, что это, а не как выглядит */
.card {
  box-sizing: border-box;
  max-width: 24rem;
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: #fff;
}
.card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}
.card__text {
  margin: var(--space-2) 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.card__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: var(--space-6);
  padding: 0 1.25rem;
  border-radius: 0.375rem;
  background: var(--color-ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s;
}
.card__link:hover {
  background: color-mix(in oklab, var(--color-ink) 80%, transparent);
}
.card__link:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

Как держать порядок при любом подходе

Оба подхода портятся одинаково — через исключения. Шесть правил, которые это останавливают.

  1. 01

    Сначала токены

    Цвета, отступы, радиусы и шрифты задаются до первого компонента и в одном месте.

  2. 02

    Компоненты в шаблонах

    В Tailwind повторяющаяся карточка — шаблон или компонент, а не скопированная строка классов.

  3. 03

    Мало произвольных значений

    Каждый p-[13px] ломает шкалу; недостающий шаг добавляют в токены.

  4. 04

    @apply — редко

    Собирать классический CSS из @apply — значит получить издержки обоих подходов без выгод.

  5. 05

    Имена по смыслу

    В своём CSS .card__title, а не .bold-black-text: внешний вид изменится, смысл — нет.

  6. 06

    Слои вместо !important

    @layer задаёт порядок сброса, компонентов и исключений, и войны специфичности не начинаются.

Частые ошибки при выборе

  1. Tailwind вместо дизайна

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

  2. Свой CSS без системы

    Значения в каждом правиле вместо токенов — через год никто не знает, какой серый правильный.

  3. Две системы в одном проекте

    Половина в утилитах, половина в своих файлах — каждую правку приходится искать в обоих местах.

  4. Выбирать из-за размера

    Несколько килобайт CSS редко решают скорость — картинки, шрифты и скрипты весят куда больше.

  5. Классы, собранные из строк

    Tailwind находит в коде только целые имена классов; bg-${color} молча пропадает из сборки.

  6. Забыть про следующую большую версию

    Переход с Tailwind 3 на 4 поменял настройку — фреймворку нужно время на обновления в плане работ.

Вопросы о Tailwind и своём CSS

Tailwind лучше обычного CSS?

Ни один не лучше: Tailwind быстрее на старте и проще для передачи команде, свой CSS даёт чистую разметку и никакой зависимости.

Tailwind замедляет сайт?

Нет: сборка оставляет только используемые классы, и на большом сайте файл остаётся небольшим.

Что изменилось в Tailwind 4?

Настройки переехали в CSS (@theme), токены стали CSS-переменными, а сборка стала намного быстрее.

Сложно ли уйти с Tailwind на свой CSS?

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

Влияет ли выбор на SEO?

Нет: поисковики и ИИ-ассистенты читают структуру HTML и текст, а не имена классов.

Есть ли в Tailwind container queries?

Да, с версии 4 они встроены: @container на родителе и @md: на дочерних элементах.

А Bootstrap?

Он даёт готовые компоненты с узнаваемым видом — подходит для внутренних инструментов, редко для сайта со своим стилем.

Форма

Обсудить
вёрстку

Верстаю на собственной системе токенов, а Tailwind беру, если проект дальше ведёт ваша команда и она на нём работает. Расскажите о проекте — отвечу в течение рабочего дня.

Или пишите на [email protected]