Tailwind CSS

Tailwind CSS – utility-first CSS-фреймворк, предоставляющий низкоуровневые утилитарные классы для создания собственного дизайна прямо в HTML-разметке. Вместо написания CSS в отдельных файлах разработчики собирают дизайн из классов вроде flex, pt-4, text-center и bg-blue-500 непосредственно на элементах. Фреймворк избавляет от необходимости придумывать имена CSS-классов и поддерживать разрастающиеся таблицы стилей, сохраняя полную свободу дизайна.

Utility-first подход даёт хорошо поддерживаемую кодовую базу: стили явно видны в разметке, а удаление элемента автоматически удаляет и его стили. Шаг purge в продакшене убирает все неиспользуемые утилитарные классы, поэтому CSS-бандлы обычно весят меньше 10 КБ. Конфигурационный файл позволяет настроить дизайн-систему под проект: цвета, шкалы отступов, шрифты и breakpoints. Адаптивность реализуется префиксами брейкпоинтов вроде md: и lg:, а варианты состояний hover: и focus: держат стили взаимодействия рядом с элементом. Tailwind стал одним из самых распространённых CSS-фреймворков в современной веб-разработке.