Tailwind CSS

Tailwind CSS – это CSS-фреймворк, в котором оформление задают готовыми короткими классами прямо в HTML: отступ, цвет, размер шрифта, поведение на телефоне. Отдельный файл стилей почти не пишут, а в итоговый CSS попадают только использованные классы.

Если вы искали кроссовки Nike Air Tailwind, вам не сюда: эта статья про инструмент для вёрстки. Откройте код сайта на Tailwind, и вместо привычного класса button увидите длинную строку вроде flex items-center gap-4 px-6 rounded-xl. Выглядит как беспорядок, но за ним стоит строгая система.

Одна кнопка в классах Tailwind

<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg md:text-lg">
  Записаться
</button>

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

Размеры, цвета и шрифты берутся из общей темы проекта, а не придумываются на месте. Поэтому px-6 везде означает один и тот же отступ, а синий везде одного оттенка. Тема хорошо ложится на дизайн-систему: цвета и отступы из макета дизайнера переносят в неё один раз.

Адаптивность устроена так же. Класс без приставки действует на всех экранах, а приставки sm:, md:, lg: включают его начиная с определённой ширины. Сначала верстают под телефон, потом добавляют правила для больших экранов, и мобильная версия получается не отдельной задачей, а частью каждого блока.

Как Tailwind собирает стили

При сборке Tailwind просматривает шаблоны, HTML-файлы и компоненты, находит в них классы и генерирует CSS только для них. На сайт уходит один статический файл, и никакой программы, которая работала бы у посетителя в браузере, не нужно. Даже на большом проекте файл стилей остаётся небольшим, потому что одни и те же классы повторяются.

Отсюда и главное ограничение. Tailwind видит только те классы, которые целиком написаны в коде. Если класс склеивают из кусков в скрипте или вписывают вручную в админке, при сборке его не найдут, и стиль на сайте не появится.

Tailwind Labs, четвёртая версия и переход в Shopify

Tailwind CSS создал Адам Уотан, развивает его компания Tailwind Labs, лицензия MIT. В январе 2025 года вышла версия 4.0, в которой движок переписали и перенесли настройки темы прямо в CSS. На октябрь 2026 года актуальна четвёртая версия, выпуск 4.3 с новыми возможностями вышел в мае 2026 года. С препроцессорами Sass и Less четвёртая версия работать не рассчитана, так что в новом проекте их рядом с Tailwind не используют.

В сентябре 2026 года команда Tailwind Labs перешла в Shopify. В официальном объявлении сказано, что для Tailwind CSS ничего не меняется: фреймворк остаётся под лицензией MIT, его ведёт та же команда. Регистрацию новых клиентов в платный набор готовых блоков Tailwind Plus при этом закрыли.

Tailwind, Bootstrap или свой CSS

Bootstrap даёт готовые компоненты с собственным видом, Tailwind даёт только строительные блоки, а компоненты собирают под свой дизайн.

Что проверить до выбора Tailwind

• Tailwind CSS 4 рассчитан на Chrome 111, Safari 16.4, Firefox 128 и новее. Если среди ваших клиентов много старых устройств, нужна версия 3.4.
• Базовый сброс стилей Preflight убирает оформление заголовков, списков и отступы. Тексты из визуального редактора админки без отдельных стилей для контента будут выглядеть как сплошной текст. Обычно это решают официальным плагином типографики: обёртка с классом prose возвращает аккуратный вид заголовкам, спискам и абзацам из CMS. Из-за того же сброса Tailwind не подключают поверх стилей старого сайта: готовая вёрстка поедет.
• Тестовое подключение через Play CDN годится только для разработки. На рабочем сайте нужен собранный файл стилей.
• Стили видны прямо в разметке, поэтому другой разработчик быстро разберётся в чужом компоненте.

Как узнать, что сайт сделан на Tailwind

Откройте код страницы. Характерные классы вроде flex, px-4, text-gray-700, md:grid-cols-3 подсказывают ответ. Точнее скажет файл стилей: в начале собранного CSS обычно стоит комментарий с названием tailwindcss и номером версии. Номер версии важен, если сайт будут дорабатывать: настройки третьей и четвёртой версий заметно отличаются.

Вёрстку на Tailwind CSS по макету делаем при разработке сайтов и веб-дизайна. Если проект уже работает на Tailwind CSS, берём его на доработку и техническую поддержку.

Подключение, тема и ограничения Tailwind на рабочем сайте

Документация и блог Tailwind CSS

• Tailwind CSS: официальная документация (Styling with utility classes, Preflight, Compatibility, Play CDN)
• Блог Tailwind CSS: анонсы версий 4.0 и 4.3, объявление о переходе в Shopify

См. также: Мобильная версия сайта, Скорость сайта, GSAP, UI-кит.