Свои утилиты и компоненты

Иногда готовых классов не хватает: нужно CSS-свойство, для которого нет утилиты, или повторяющийся набор стилей для HTML, который вы не контролируете. Tailwind 4 даёт три инструмента: @utility — своя утилита, @layer components — класс-компонент, @apply — вставка утилит в обычное CSS-правило.

@utility

@utility создаёт новую утилиту. Она ведёт себя как встроенная: работает с вариантами hover:, md: и правильно сортируется в CSS. Пишут её в главном CSS-файле, например src/style.css:

@import "tailwindcss";
 
@utility scrollbar-hidden {
  scrollbar-width: none;
}

В браузерном скрипте — внутри <style type="text/tailwindcss">:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @utility scrollbar-hidden {
    scrollbar-width: none;
  }
</style>
 
<div class="scrollbar-hidden flex w-64 gap-2 overflow-x-auto">
  <span class="shrink-0 rounded-full bg-gray-100 px-3 py-1">Наушники</span>
  <span class="shrink-0 rounded-full bg-gray-100 px-3 py-1">Колонки</span>
  <span class="shrink-0 rounded-full bg-gray-100 px-3 py-1">Зарядки</span>
  <span class="shrink-0 rounded-full bg-gray-100 px-3 py-1">Кабели</span>
</div>

Ряд категорий прокручивается вбок, но полоса прокрутки скрыта.

Компоненты и @apply

@apply вставляет стили утилит внутрь обычного CSS-правила. В слое components так делают классы-компоненты, которые затем можно переопределить утилитами:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @layer components {
    .btn-primary {
      @apply rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-500;
    }
  }
</style>
 
<button class="btn-primary">В корзину</button>
<button class="btn-primary bg-gray-900">Купить сейчас</button>

Обе кнопки оформлены одним классом. У второй утилита bg-gray-900 перебила фон компонента: слой utilities в Tailwind сильнее слоя components.

Когда @apply уместен

@apply удобен, но если переносить в него всю вёрстку, вы возвращаетесь к обычному CSS с придуманными именами — и теряете главное преимущество Tailwind. Сначала ищите способ переиспользовать разметку, а не классы.

@apply в файлах компонентов

В блоке <style> компонента Vue или Svelte Tailwind не знает вашу тему. Чтобы @apply там работал, в начале блока подключают главный CSS-файл директивой @reference "../style.css"; — она даёт доступ к теме, не дублируя стили.

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

Сделать через @apply класс для каждого элемента:

.card-title {
  @apply text-lg font-semibold text-gray-900;
}
 
.card-price {
  @apply text-xl font-bold;
}

Это тот же CSS с придуманными именами, только длиннее: теперь, чтобы поменять заголовок, надо искать правило в другом файле. Оставляйте утилиты в разметке, а @apply берите только для случаев из таблицы выше.