Что такое utility-first CSS (например Tailwind) концептуально?

Смысл

Utility-first — стилизуете разметку готовыми атомарными классами (flex, p-4, text-sm), а не пишете уникальный CSS под каждый блок.

Идея

Вместо .card { padding: 16px; ... } в HTML: class="p-4 rounded shadow". Дизайн-токены живут в конфиге; JIT/purge выкидывает неиспользованное.

<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  Сохранить
</button>

Плюсы: скорость, единообразие отступов, меньше invent-имён. Минусы: шумная разметка, нужна дисциплина @apply/компонентов, кривая обучения.

Итог

Это не «инлайн-стили», а библиотека ограничений дизайн-системы в виде классов. Компоненты (React/Vue) компенсируют повторы в HTML.