Что такое Tailwind CSS?

Tailwind CSS — utility-first фреймворк: вместо написания своих классов собираете оформление из готовых утилит прямо в разметке.

<article class="rounded-lg border p-4 shadow-sm hover:shadow-md md:flex md:gap-4">
  <img class="h-24 w-24 rounded object-cover" src="cover.jpg" alt="Обложка" />
  <h2 class="mt-2 text-lg font-semibold text-gray-900">Заголовок</h2>
</article>

Как работает

• Каждая утилита — одно свойство: p-4 — padding, text-lg — размер шрифта.
• Префиксы задают условия: md: — брейкпоинт, hover: — состояние, dark: — тёмная тема.
• При сборке в CSS попадают только реально использованные классы.
• Значения берутся из темы (дизайн-токены), её можно настроить.

Плюсы

• быстрая разработка, нет проблемы именования;
• единые отступы и цвета;
• маленький итоговый CSS.

Минусы

• длинные строки классов в разметке;
• повторяющиеся наборы нужно выносить в компоненты;
• нужно привыкнуть к названиям утилит.

Коротко для собеседования

Tailwind — utility-first фреймворк: стили собираются из одноцелевых классов с префиксами для адаптивности и состояний, в CSS попадает только используемое.

Подробнее: Tailwind CSS — Документация