Почему я бы не выбрал tailwind CSS для серьёзного проекта

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

Суть претензии

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

Что именно не так

Одна из первых проблем — необходимость помнить десятки классов и их вариации. Документация и автодополнение помогают, но они не отменяют постоянных проверок и снижают ощущение прозрачности. Если в проект добавляются свои классы и соглашения, сложность только растёт.

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

Ещё одна проблема — непоследовательность названий. Классы вроде items-center, justify-center, text-center и place-content-center относятся к разным контекстам и выравнивают разные сущности. Логику здесь приходится запоминать, а не угадывать по названию.

Автор также критикует произвольные значения: когда появляются конструкции вроде w-[347px] или пользовательские цвета в произвольном формате, идея единой системы размывается. В итоге проект может начать противоречить собственным правилам.

Отдельно он отмечает путаницу с приоритетами. В HTML не всегда видно, какой класс победит в конфликте, потому что итог зависит от порядка генерации в CSS, а не от того, как классы расположены в разметке. Это создаёт ощущение утечки абстракции и усложняет отладку.

В devtools такая структура тоже мешает: при большом количестве классов сложно быстро понять, какой именно стиль перекрывает другой. С обычным CSS анализ конфликта часто проще, потому что виден явный порядок правил.

ПРОБЛЕМА ПРИ РОСТЕ ПРОЕКТА
──────────────────────────

  Малый проект            Большой проект
  ┌───────────┐          ┌──────────────┐
  │ Tailwind  │          │ Tailwind CSS │
  │  быстро   │          │  шум в HTML  │
  │  удобно   │          │  больше      │
  └─────┬─────┘          │  исключений  │
        │                └──────┬───────┘
        ▼                       ▼
   быстрый старт          сложнее читать
                          и поддерживать

Справедливости ради

В мире компонентов — например, в React или Vue — аргумент о разделении стилей и разметки уже не так убедителен, потому что всё равно приходится работать в одном файле или рядом с компонентом. В таких сценариях Tailwind действительно может экономить время.

Современный CSS уже многое умеет

Автор статьи задаёт важный вопрос: зачем строить прослойку над тем, что уже есть в браузере? Сегодня нативный CSS предлагает cascade layers, вложенность, CSS-переменные, : has (), container queries и color-mix (). То есть браузер сам даёт инструменты для системности и адаптивности.

Ирония в том, что Tailwind сам опирается на эти же механизмы. Поэтому в некоторых случаях логичнее использовать возможности платформы напрямую, а не добавлять дополнительный слой абстракции.

ВЫБОР ИНСТРУМЕНТА
─────────────────

  Малый проект                Большой проект
  ┌───────────┐               ┌─────────────┐
  │ Tailwind  │               │ Modern CSS  │
  │   CSS     │               │ + система   │
  └─────┬─────┘               └──────┬──────┘
        │                              │
        ▼                              ▼
   быстрый запуск               читаемость,
   и прототипы                  контроль, рост

Когда tailwind оправдан

Tailwind уместен там, где нужен быстрый запуск, MVP, небольшая команда или уже сложившаяся привычка работать через утилитарные классы. В этих условиях он действительно ускоряет сборку интерфейса и снижает порог входа в типовые задачи.

Выводы

Главная мысль статьи не в том, что Tailwind CSS плох, а в том, что у него есть цена. Для одних проектов эта цена оправдана, для других — нет. Выбирать инструмент стоит осознанно, с пониманием масштаба, команды и долгосрочной поддержки.

Если вы только начинаете, полезно сначала уверенно освоить чистый CSS, а уже потом сравнить его с Tailwind. Тогда выбор будет не модным, а профессиональным.

Ссылки

• Why I don’t recommend Tailwind CSS — оригинальная статья Andros Fenollosa