Что это такое
Tailwind CSS — CSS-фреймворк с подходом, где внешний вид собирается из маленьких готовых классов. Вместо заранее придуманных классов вроде card-title разработчик собирает внешний вид из маленьких классов: отступы, цвет, размер, сетка, адаптивность и состояния.
Проект стал заметным, потому что предложил другой компромисс: не готовые компоненты как Bootstrap и не полностью ручной CSS, а низкоуровневый язык оформления, который живет рядом с HTML, JSX или шаблоном.
Что внутри и как используют
Внутри репозитория — движок Tailwind, PostCSS-интеграция, правила генерации классов, документация, тесты и пакеты вокруг современного CSS. Его используют и в небольших сайтах, и в больших продуктовых интерфейсах.
Кнопка на utility-классах
Пример показывает идею Tailwind: внешний вид задается набором маленьких классов прямо у элемента.
<button class="rounded-md bg-zinc-950 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800">
Save changes
</button>Типовой сценарий — собрать компонент прямо в разметке, а повторяющиеся куски вынести в компонент фреймворка. Это особенно удобно в React, Vue, Blade и других шаблонных системах.
Сильные стороны и ограничения
Сильная сторона Tailwind — скорость и предсказуемость: стили меньше расползаются по глобальным файлам, а разработчик быстрее видит, почему элемент выглядит именно так.
Ограничение — шумная разметка и необходимость дисциплины. Без компонентов, темы и соглашений страница может превратиться в длинный список классов. Tailwind помогает собирать интерфейс, но не заменяет дизайн-систему.