Vlastní třída s @apply

Tailwind umí dát celému seznamu svých tříd jedno jméno, které si sami vyberete. V souboru style.css napíšete pravidlo pro vlastní třídu, jako v kurzu CSS, a do něj @apply a za ním třídy Tailwindu:

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

@apply vezme CSS uvedených tříd a vloží ho do vašeho pravidla: .tlacitko dostane display: inline-block, zaoblené rohy, pozadí, polstrování a všechno ostatní. Fungují i varianty: z hover:bg-brand-600 vytvoří Tailwind pravidlo pro .tlacitko:hover. Jméno tlacitko jsme vymysleli sami a je bez diakritiky, jako jména všech našich tříd. (Na anglických webech často uvidíte btn, zkratku slova button.)

V HTML pak stačí jedna třída:

<a href="#" class="tlacitko mt-4">Adoptovat Mourka</a>

Třídu mt-4 jsme do .tlacitko nedali: mezera nad tlačítkem závisí na tom, kde tlačítko je, ne na tom, jak tlačítko vypadá. Vlastní třídu můžete kombinovat s jakýmikoli utility třídami.

Proč @layer components? Tailwind řadí své CSS do vrstev (v CSS se jim říká kaskádové vrstvy, anglicky cascade layers): nejdřív base (Preflight), pak components (komponenty) a nakonec utilities, utility třídy. Když pravidla v různých vrstvách nastavují stejnou vlastnost, vyhraje pravidlo z pozdější vrstvy, bez ohledu na specificitu i na pořadí v souboru. Pravidlo .tlacitko jsme dali do vrstvy components, takže utility třídy nad ním vyhrají vždycky. Proto může mít tlačítko v úvodní sekci třídu tlacitko, a přesto být větší:

<a href="#kocky" class="tlacitko mt-8 px-8 py-3 text-lg">Seznamte se s kočkami</a>

px-8 a py-3 vyhrají nad px-5 a py-2 z .tlacitko. Bez @layer components by pravidlo pro .tlacitko nebylo v žádné vrstvě, a CSS mimo vrstvy vyhrává nad všemi vrstvami: px-8 by pak nic neudělala.

Chyby v @apply. Jak víte, třída s překlepem v HTML prostě nic neudělá. V @apply je to jinak: Tailwind vaše pravidlo nedokáže vytvořit, takže stránka nedostane ze style.css vůbec žádné CSS a pod náhledem se červeně objeví chyba, například:

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

Chyba je anglicky a říká, kterou třídu Tailwind nezná (unknown utility class znamená neznámá utility třída). Opravte ji a spusťte kód znovu.