Чем utility-классы отличаются от component-классов в Tailwind?

Question

Accepted Answer

## Разберёмся

В экосистеме Tailwind это два уровня одной системы.

## Разница

- **Utility** — атомы: `flex`, `pt-2`, `text-gray-700`. Одна ответственность, переиспользуются везде.
- **Component classes** — составные абстракции: `@apply` или React-компонент с пачкой утилит (`Btn`, `Card`). Имя отражает UI-блок.

```css
@layer components {
  .btn-primary {
    @apply rounded-lg bg-blue-600 px-4 py-2 text-white;
  }
}
```

Утилиты — гибкость и единообразие; компоненты — устранение шума в разметке для повторяющихся паттернов. Злоупотребление `@apply` возвращает к «обычному CSS» и теряет преимущества JIT.

## Итог

Utilities — кирпичи; components — собранные детали. Баланс держите через реальные повторы в UI, не через абстракции «на вырост».