Tailwind против обычного CSS и Bootstrap

Где место Tailwind между «голым» CSS и готовыми компонентами Bootstrap.

Компонентный фреймворк (Bootstrap) даёт готовые блоки вроде .btn и .card; utility-фреймворк (Tailwind) даёт кирпичики, из которых вы собираете блоки сами.

Три подхода к стилизации

Сравним, как одна и та же кнопка выглядит в трёх мирах.

Обычный CSS — полный контроль, но всё пишете руками:

<button class="btn-primary">Купить</button>

.btn-primary {
  background: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}

Bootstrap — готовый класс, минимум усилий, но и минимум свободы:

<button class="btn btn-primary">Купить</button>

Tailwind — собираете кнопку из утилит, контроль как в CSS, но без отдельного файла:

<button class="bg-blue-600 text-white px-4 py-2 rounded-md">Купить</button>

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

В чём сила Tailwind

• Никакого «фирменного» вида. Сайты на Bootstrap часто узнаваемы «на глаз». Tailwind не навязывает дизайн — вы делаете любой.
• Гибкость без борьбы с фреймворком. Не нужно перебивать чужие правила через !important или более длинные селекторы.
• Маленький итоговый CSS. В сборку попадают только те утилиты, что вы реально использовали (об этом — в уроке про установку).

Критика и честные минусы

• «Грязная» разметка. Строки классов бывают длинными: class="flex items-center gap-3 px-4 py-2 ...". Многих это отпугивает на старте.
• Нужно выучить названия утилит. Поначалу приходится сверяться с документацией.
• Нет готовых компонентов из коробки. Кнопку и модалку вы собираете сами (хотя есть готовые наборы вроде Tailwind UI и сообщество компонентов).

Большинство этих минусов снимается практикой и инструментами: подсказки в редакторе, плагин для сортировки классов, вынос повторов в компоненты фреймворка (React/Vue) или директиву @apply. К этому мы ещё вернёмся.

Когда что выбирать

Итог

• Bootstrap даёт готовые компоненты, Tailwind — утилиты для сборки своих.
• Tailwind не навязывает внешний вид и не заставляет бороться с чужими стилями.
• Главный минус — длинные строки классов — решается инструментами и переиспользованием.