Свой класс с @apply

Tailwind умеет собрать целый список своих классов под одним именем, которое выберете вы. В style.css вы пишете правило для своего класса, как в курсе CSS, а в нём — @apply и затем классы Tailwind:

@layer components {
	.btn {
		@apply inline-block rounded-full bg-brand-500 px-5 py-2 font-semibold text-white transition-colors hover:bg-brand-600;
	}
}

@apply берёт CSS перечисленных классов и вставляет его в ваше правило: .btn получает display: inline-block, скруглённые углы, фон, внутренние отступы и всё остальное. Варианты тоже работают: из hover:bg-brand-600 Tailwind делает правило для .btn:hover. Имя btn (сокращение от button, «кнопка») выбрали мы, но вы увидите его на многих сайтах.

Тогда в HTML достаточно одного класса:

<a href="#" class="btn mt-4">Взять Тигра</a>

mt-4 мы не включили в .btn: отступ над кнопкой зависит от того, где стоит кнопка, а не от того, как она выглядит. Свой класс можно сочетать с любыми утилитными классами.

Зачем нужен @layer components? Tailwind раскладывает свой CSS по слоям (в CSS их называют каскадными слоями): сначала base (Preflight), затем components, а последним utilities — утилитные классы. Когда правила из разных слоёв задают одно и то же свойство, побеждает правило из более позднего слоя, независимо от специфичности и от места в таблице стилей. Мы поместили .btn в слой components, поэтому утилитные классы всегда сильнее него. Поэтому кнопка на первом экране может быть btn и при этом оставаться крупнее:

<a href="#cats" class="btn mt-8 px-8 py-3 text-lg">Познакомьтесь с кошками</a>

px-8 и py-3 побеждают px-5 и py-2 из .btn. Без @layer components правило для .btn не входило бы ни в один слой, а CSS вне слоёв побеждает все слои: px-8 ничего бы не делал.

Ошибки в @apply. Как вы знаете, класс с опечаткой в HTML просто ничего не делает. В @apply всё иначе: Tailwind не может создать ваше правило, поэтому страница не получает ни одного правила CSS из style.css, а под предпросмотром появляется красная ошибка, например:

style.css: Cannot apply unknown utility class `bg-brnd-500`

В ней сказано, какой класс Tailwind не знает. Исправьте его и снова запустите код.