Vlastní utility třída

Třída vytvořená pomocí @apply má jedno omezení: není to utility třída, a proto nefunguje s variantami. hover:tlacitko nebo md:tlacitko nic neudělá, protože Tailwind vytváří varianty jen z utility tříd, které zná. A někdy potřebujete CSS, které žádná třída Tailwindu nevytváří, třeba vzor na pozadí.

K tomu slouží @utility. Vytvoří novou utility třídu, která funguje stejně jako třídy Tailwindu: samotná, s jakoukoli variantou i v @apply. Za @utility napíšete jméno třídy (bez tečky) a pak deklarace, jako v pravidle:

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

Vlastnost background-image (obrázek na pozadí) maluje do pozadí prvku obrázek, přes jeho barvu pozadí. Tady ten obrázek není soubor: repeating-linear-gradient() (opakovaný lineární gradient) nechá prohlížeč namalovat pruhy, šikmé pod úhlem 45 stupňů (45deg). Střídají se po 12 pixelech: průhledný, kterým prosvítá barva pozadí, a bílý s poloviční průhledností. Na našem světle oranžovém pozadí vypadají takhle:

Teď je bg-pruhy třída jako každá jiná: můžete psát md:bg-pruhy, hover:bg-pruhy a tak dále. Je ve vrstvě utilities, takže vyhrává nad třídami jako .tlacitko. A Tailwind vytvoří její CSS, jen když ji stránka používá, stejně jako u svých tříd. Své utility třídy pojmenovávejte jako Tailwind: podle toho, co a jak mění (bg- pro pozadí).