Своя утилита

У класса, созданного через @apply, есть одно ограничение: это не утилитный класс, поэтому он не работает с вариантами. hover:btn или md:btn ничего не сделают, потому что варианты работают только с утилитными классами, которые знает Tailwind. А иногда нужен CSS, для которого в Tailwind нет класса, например узор на фоне.

Для этого есть @utility. Он создаёт новый утилитный класс, который работает так же, как собственные классы Tailwind: сам по себе, с любым вариантом и в @apply тоже. После @utility вы пишете имя класса (без точки), а затем объявления, как в правиле:

@utility bg-stripes {
	background-image: repeating-linear-gradient(45deg, transparent 0 12px, rgba(255, 255, 255, 0.5) 12px 24px);
}

Свойство background-image рисует картинку на фоне элемента, поверх его цвета фона. Здесь картинка — не файл: repeating-linear-gradient() заставляет браузер нарисовать полосы, наклонённые на 45 градусов (45deg). Они чередуются каждые 12 пикселей: прозрачная, через которую виден цвет фона, и белая с прозрачностью 50%. На нашем светло-оранжевом фоне они выглядят так:

Теперь bg-stripes — такой же класс, как любой другой: можно написать md:bg-stripes, hover:bg-stripes и так далее. Он находится в слое utilities, поэтому сильнее таких классов, как .btn. И Tailwind создаёт его CSS только тогда, когда страница его использует, как и для собственных классов. Называйте свои утилиты так, как это делает Tailwind: по тому, что они меняют и как (bg- — фон).