У каждого фронтендера есть момент, когда он открывает CSS-файл, чтобы поменять отступ у карточки, и обнаруживает, что класс называется .card-wrapper-inner—highlighted. Имя придумывал кто-то другой, логика стилей размазана по трём файлам, а результат зависит от каскада, который никто полностью не помнит.
Tailwind CSS предлагает другой маршрут. Вместо того чтобы придумывать имена классов и переключаться между HTML и CSS, вы добавляете готовые утилитарные классы прямо в разметку. Один класс — одно свойство. Никаких отдельных файлов стилей, никакой охоты за каскадом.
Фреймворк вышел в 2017 году, прошёл через три мажорные версии и к 2026 году собрал более 96 000 звёзд на GitHub. Актуальная версия — v4.3.3, выпущенная в июле 2026 года. Лицензия — MIT.
Что это
Utility-first CSS-фреймворк — подход, при котором стили не пишутся вручную в отдельных CSS-файлах, а собираются из готовых утилитарных классов прямо в HTML-разметке. Каждый класс делает ровно одно действие: p-4 добавляет внутренний отступ, text-red-500 красит текст, flex включает flexbox.
Представьте конструктор LEGO. Вместо того чтобы лепить деталь нужной формы из пластилина, вы берёте готовый блок и ставите его на место. Tailwind работает так же: сотни готовых классов-блоков, из которых собирается любой дизайн. Разница в том, что блоки не нужно клеить — они сразу становятся частью HTML.
Традиционный CSS требует два шага: придумать имя класса, потом написать для него стили в отдельном файле. Tailwind убирает первый шаг и делает второй явным — стили видны прямо в разметке.
Сравните два подхода. Традиционный CSS:
.card {
padding: 1rem;
border-radius: 0.5rem;
background-color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}<div class="card">Контент</div>Tailwind CSS:
<div class="p-4 rounded-lg bg-white shadow-sm">Контент</div>Результат одинаковый. Но во втором случае не нужно придумывать имя класса и переключаться между файлами — стили живут там же, где разметка.
Зачем нужно
Tailwind решает несколько задач, которые в традиционном CSS требуют постоянных переключений контекста:
- Быстрая вёрстка — Hero-секции, карточки, навигация стилизуются прямо в компонентах, без переключения между HTML и CSS. Время на прототипирование сокращается в несколько раз.
- Стилизация контента из CMS — плагин @tailwindcss/typography добавляет класс prose, который автоматически оформляет HTML из CMS: заголовки, списки, код, цитаты, ссылки. Один класс — и «голый» текст превращается в набранную статью.
- Адаптивность без media queries — респонсив через префиксы md:, lg: прямо в классах. Не нужно писать отдельные media queries в CSS.
- Тёмная тема — префикс dark: переключает стили под тему ОС без дополнительного кода.
- Минимальный размер CSS — в production попадают только те классы, которые реально используются в разметке. Итоговый CSS-бандл обычно 10–30 КБ.
Инсайт: Tailwind не заменяет CSS — он заменяет процесс написания CSS. Вместо «придумай имя → открой файл → напиши правило → проверь каскад» вы собираете дизайн из готовых токенов прямо в разметке. Это смена рабочего контура, а не косметическая замена.
Как устроено
Утилитарные классы
Каждый класс в Tailwind делает ровно одну вещь. Классы сгруппированы по категориям:
| Категория | Примеры | Что делает |
|---|---|---|
| Отступы | p-4, mx-auto, mt-8 | Padding, margin |
| Цвета | text-gray-900, bg-blue-500 | Цвет текста, фона |
| Типографика | text-xl, font-bold, leading-relaxed | Размер, жирность, межстрочный |
| Раскладка | flex, grid, gap-4, justify-center | Flexbox, Grid |
| Размеры | w-full, h-screen, max-w-prose | Ширина, высота |
| Границы | rounded-lg, border, border-gray-200 | Скругления, рамки |
| Эффекты | shadow-md, opacity-75, blur-sm | Тени, прозрачность, размытие |
Числа в классах — это шкала значений. p-4 не означает «4 пикселя», это четвёртый шаг в шкале отступов, равный 1 rem. Шкала построена по принципу возрастающих интервалов: p-1 = 0.25 rem, p-2 = 0.5 rem, p-4 = 1 rem, p-8 = 2 rem. Чем больше число, тем больше отступ — но шкала нелинейная, чтобы маленькие значения давали заметные изменения, а большие не разрастались слишком.
Адаптивный дизайн
Префиксы для разных экранов работают по принципу mobile-first — базовые классы применяются на мобильных, а префиксы добавляют стили для больших экранов:
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 1 колонка на мобильных, 2 на планшетах, 3 на десктопах -->
</div>Каждый префикс соответствует минимальной ширине экрана:
| Префикс | Мин. ширина | Устройство |
|---|---|---|
| sm: | 640px | Большой телефон |
| md: | 768px | Планшет |
| lg: | 1024px | Ноутбук |
| xl: | 1280px | Десктоп |
| 2xl: | 1536px | Большой монитор |
Логика mobile-first означает, что класс без префикса — это базовый стиль для самого маленького экрана. Класс с md: активируется на экранах от 768px и шире. Не нужно писать отдельные стили для мобильных — они задаются по умолчанию.
Тёмная тема
Префикс dark: переключает стили, когда у пользователя включена тёмная тема ОС:
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
Автоматически переключается под тему ОС
</div>Светлый фон становится тёмным, тёмный текст — светлым. Переключение происходит через CSS media query prefers-color-scheme — без JavaScript и без ручной логики.
Кастомизация
В Tailwind v3 всё настраивается через JavaScript-конфиг:
// tailwind.config.mjs
export default {
theme: {
extend: {
colors: {
brand: '#4F46E5',
accent: '#F59E0B',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
},
},
}
После этого можно писать text-brand, bg-accent, font-sans — кастомные токены работают точно так же, как встроенные.
Совет: Используйте extend внутри theme, а не заменяйте theme целиком. extend добавляет ваши значения к встроенной палитре — все стандартные классы продолжают работать. Без extend вы теряете доступ к встроенным цветам и шкалам.
Tailwind v4: новый движок и конфигурация через CSS
22 января 2025 года вышел Tailwind CSS v4. Версия принесла несколько архитектурных изменений:
- Конфигурация через CSS вместо JS-файла — настройки теперь живут в директиве @theme прямо в CSS, а не в tailwind.config.mjs. Один файл вместо двух.
- Новый высокопроизводительный движок — полные билды ускорены до 5 раз, инкрементальные — более чем в 100 раз, с измерением в микросекундах. На реальных проектах разработчики Tailwind Labs зафиксировали ускорение полных пересборок в 3.5 раза, инкрементальных — в 8 раз.
- Автоматическое обнаружение контента — не нужно указывать пути в content-массиве. Движок сам находит файлы с классами.
- Нативные CSS-переменные — все токены доступны как var(—color-blue-500), не только как классы.
Новый формат конфигурации в v4:
/* Новый формат в v4 */
@import "tailwindcss";
@theme {
--color-brand: #4F46E5;
--font-sans: "Inter", sans-serif;
}Внимание: Многие Astro-темы и сторонние шаблоны всё ещё работают на Tailwind v3. При выборе темы проверяйте версию фреймворка. Миграция v3 на v4 не сложная, но требует внимания: меняется формат конфигурации, часть плагинов может не поддерживать новый движок.
Когда использовать
Tailwind подходит для проектов, где важна скорость вёрстки и полный контроль над дизайном:
- Личные сайты и блоги на Astro — одна команда npx astro add tailwind подключает фреймворк, и классы доступны во всех .astro, .jsx, .svelte файлах. Astro сам настраивает конфиг и интеграцию.
- Контентные сайты с CMS — плагин @tailwindcss/typography обязателен, когда контент приходит как HTML из CMS или Markdown. Класс prose автоматически оформляет заголовки, списки, код, цитаты:
<article class="prose dark:prose-invert max-w-prose mx-auto">
<!-- HTML из CMS -->
<h2>Заголовок статьи</h2>
<p>Текст с <strong>выделением</strong> и <a href="#">ссылками</a></p>
<pre><code>И код тоже</code></pre>
</article>Всё автоматически получает типографику: отступы, размеры шрифтов, стили ссылок, подсветку кода.
- Прототипы и MVP — когда дизайн ещё меняется каждую итерацию, утилитарные классы позволяют двигаться быстрее, чем традиционный CSS с постоянным переименованием классов.
- Проекты с уникальным дизайном — Tailwind не навязывает визуальный стиль. В отличие от Bootstrap, где все сайты выглядят похоже, Tailwind даёт полную свободу оформления.
Когда Tailwind избыточен: простые лендинги из одной страницы без адаптива и тёмной темы — там достаточно 50 строк обычного CSS.
Пример
Подключение к Astro — одна команда:
npx astro add tailwindAstro сам установит пакет, создаст конфигурацию и подключит интеграцию. После этого классы Tailwind доступны во всех шаблонах проекта.
Сравнение с альтернативами
| Критерий | Tailwind CSS | Обычный CSS / SCSS | Bootstrap |
|---|---|---|---|
| Подход | Utility-first | Компонентный / BEM | Готовые компоненты |
| Кастомизация | Полная, через конфиг | Полная, вручную | Ограниченная |
| Размер CSS | 10–30 КБ (purge) | Зависит от разработчика | ~160 КБ min |
| Скорость разработки | Высокая | Средняя | Высокая, но однотипно |
| Уникальность дизайна | Любой дизайн | Любой дизайн | Все сайты похожи |
Bootstrap даёт готовые компоненты — кнопки, карточки, навигацию — но за это приходится платить одинаковым внешним видом. Tailwind не даёт готовых компонентов, но даёт строительные блоки, из которых собирается любой дизайн. Разница как между готовой мебелью из IKEA и конструктором: первое быстрее, второе гибче.
Ограничения
Ограничения
Что учитывать при работе с Tailwind CSS.
Длина строки классов — Сложные компоненты могут накопить 15–20 классов в одном элементе.
Строка превращается в длинную цепочку, которую тяжело читать. Решается выносом в компонент (React, Astro) или функцию-хелпер, но сам факт: Tailwind переносит сложность из CSS в HTML.
Миграция v3 на v4 требует внимания — Формат конфигурации меняется с JS на CSS, часть плагинов может не поддерживать новый движок.
На крупных проектах с десятками зависимостей миграция — это отдельная задача, а не обновление одной версии в package.json.
Порог входа для команд — Разработчику, привыкшему к BEM и отдельным CSS-файлам, нужно выучить шкалы классов и префиксы.
Первые дни — постоянное обращение к документации. Порог невысокий, но есть.
Антипаттерны
Антипаттерны
Чего не делать при работе с Tailwind CSS.
Не использовать @apply для всего — Директива @apply позволяет собирать утилитарные классы внутри обычного CSS.
Разработчики из BEM-мира часто пишут .card { @apply p-4 rounded-lg bg-white shadow-sm; } — и теряют главное преимущество Tailwind: стили снова в отдельном файле, контекст переключается. @apply уместен для повторяющихся паттернов, но не как подход по умолчанию.
Не заменять theme целиком — Если в конфиге написать theme: { colors: { … } } вместо theme: { extend: { colors: { … } } }, все встроенные цвета исчезнут.
Останутся только кастомные. Это частая ошибка при первой настройке — классы вроде text-gray-500 перестают работать, и разработчик не понимает почему.
Не игнорировать версию фреймворка — Подключить v3-плагин к v4-проекту и получить тихую ошибку сборки — стандартный сценарий.
Перед установкой любого плагина проверяйте совместимость версий в документации плагина.
Чеклист
Чеклист
Проверка перед запуском проекта на Tailwind CSS.
Проверить версию Tailwind в проекте — Открыть package.json и убедиться, что tailwindcss указан с нужной версией.
v4 использует CSS-конфигурацию, v3 — JS. От этого зависит, как настраивать тему и плагины.
Убедиться, что purge/scan настроен — В v3 проверить content-массив в tailwind.config.mjs, в v4 — что движок автоматически находит файлы с классами.
Без этого в production попадёт весь фреймворк целиком, и размер CSS вырастет до сотен килобайт вместо ожидаемых 10–30 КБ.
Проверить совместимость плагинов — Для каждого плагина (@tailwindcss/typography, @tailwindcss/forms и др.) сверить версию с совместимой версией Tailwind.
Несовместимый плагин может дать тихую ошибку сборки или отсутствующие стили.
Протестировать тёмную тему — Переключить тему ОС в тёмный режим и проверить, что dark:-классы применяются.
Если переключения нет — проверить, что в CSS есть prefers-color-scheme media query и что классы написаны с обеими вариантами (bg-white dark:bg-gray-900).
Ссылки
Ссылки
- Сайт: Tailwind CSS
- Документация: Tailwind CSS Documentation
- GitHub: @tailwindcss/typography
- Документация: Tailwind + Astro Integration
- GitHub: tailwindlabs/tailwindcss
- Блог: Tailwind CSS v4.0