@apply и компонентные классы

Подробно разбираем @apply — способ собрать набор утилит в один CSS-класс.

@apply — директива Tailwind, которая «вклеивает» стили перечисленных утилит в обычное CSS-правило.

Базовый синтаксис

Внутри CSS-правила пишем @apply и список утилит — тех самых, что обычно ставите в class:

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

Теперь класс card в разметке даёт белую карточку со скруглением, тенью и внутренним отступом — как если бы вы написали все эти утилиты вручную.

Состояния тоже работают

В @apply можно включать варианты вроде hover: и focus::

.btn {
  @apply px-4 py-2 rounded font-medium bg-blue-600 text-white;
}
.btn:hover {
  @apply bg-blue-700;
}

Либо короче — прямо с префиксом: @apply hover:bg-blue-700; внутри .btn. Кнопка получит базовый вид и потемнение при наведении.

Где это писать: слой components

Чтобы такие классы корректно встали в каскад (и их можно было перебить утилитой в разметке), их оборачивают в слой components директивой @layer:

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

Слой components идёт в каскаде раньше утилит, поэтому в разметке вы по-прежнему можете точечно переопределить класс: <button class="btn bg-green-600"> сделает конкретную кнопку зелёной, не трогая остальные.

Когда применять @apply

Уместно: повторяющийся элемент (кнопка, поле ввода, бейдж), а фреймворк-компоненты недоступны; стилизация контента из внешнего HTML (например, статьи из CMS), где нельзя расставить классы.
Неуместно: уникальные блоки и желание «сделать почище» — это уводит обратно к обычному CSS и лишает плюсов utility-first.

Частая ошибка

Не выносите в @apply сразу всё подряд «для красоты». Команда Tailwind сама предупреждает: если переписать весь проект на @apply-классы, вы получите обычный CSS со всеми его минусами. @apply — точечный инструмент, а не стиль жизни.

Итог

@apply собирает утилиты (включая hover: и др.) в именованный CSS-класс.
Объявляйте такие классы в @layer components, чтобы их можно было переопределять утилитами в разметке.
Используйте точечно — для повторов и неуправляемого HTML, а не для всего подряд.