1. Что такое Tailwind CSS

Tailwind CSS: Что это и зачем нужно

Tailwind CSS — это utility-first CSS фреймворк. Вместо того чтобы писать собственные CSS-классы вроде .card, .header, .button, ты используешь готовые атомарные утилиты прямо в HTML: flex, p-4, bg-blue-500, text-white.

Звучит странно? Первая реакция большинства разработчиков — «это же ужасно, HTML превращается в кашу из классов!». Но на практике Tailwind меняет игру. Почему?

Проблема традиционного CSS

В обычном подходе ты постоянно придумываешь имена классов и прыгаешь между HTML и CSS файлами:

<!-- HTML -->
<div class="card">
  <h2 class="card-title">Заголовок</h2>
  <p class="card-text">Текст</p>
</div>

/* CSS (в другом файле) */
.card {
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.card-text {
  color: #6b7280;
  line-height: 1.6;
}

Проблемы:

• CSS файлы растут до огромных размеров
• Придумывать названия классов — мучение
• Глобальный CSS создаёт конфликты
• Изменение стиля требует изменений в двух местах

Подход Tailwind: всё в одном месте

<div class="p-4 bg-white rounded-lg shadow-md">
  <h2 class="text-xl font-semibold mb-2">Заголовок</h2>
  <p class="text-gray-500 leading-relaxed">Текст</p>
</div>

Всё описание стилей — прямо в разметке. Видишь элемент — видишь его стили. Никаких переключений между файлами.

Что Tailwind делает с размером CSS?

Tailwind генерирует только те классы, которые ты реально используешь. В продакшне твой CSS может весить 5–10 KB вместо мегабайтных бандлов Bootstrap или Material UI.

Tailwind vs Bootstrap vs Написать самому

	Tailwind	Bootstrap	Свой CSS
Размер бандла	Tiny (только использованные)	~30KB min	Зависит от тебя
Кастомизация	Полная	Ограниченная	Полная
Скорость разработки	Высокая	Высокая	Низкая
Уникальность дизайна	Полная	Все сайты похожи	Полная
Кривая обучения	Средняя	Низкая	Нет

Почему Tailwind так популярен?

В 2024–2025 годах Tailwind стал индустриальным стандартом для современных веб-приложений. Причины:

1. Скорость разработки — не нужно писать CSS, всё уже есть
2. Дизайн-система из коробки — продуманные цвета, размеры, отступы
3. Отлично работает с React/Vue/Svelte — компонентный подход идеален
4. JIT компилятор — мгновенная генерация, любые значения
5. Огромная экосистема — shadcn/ui, Headless UI, Hero Icons

Кто использует Tailwind?

• Vercel, GitHub, Discord, Shopify, Stripe
• Практически все стартапы на Next.js
• Проекты на shadcn/ui (компонентная библиотека #1 в 2024)

Практика