Eigene Utility

Eine Klasse, die du mit @apply gemacht hast, hat eine Grenze: Sie ist keine Utility-Klasse und funktioniert deshalb nicht mit Varianten. hover:knopf oder md:knopf bewirkt nichts, denn Varianten funktionieren nur mit den Utility-Klassen, die Tailwind kennt. Und manchmal brauchst du CSS, für das Tailwind keine Klasse hat, zum Beispiel ein Muster im Hintergrund.

Dafür gibt es @utility. Es macht eine neue Utility-Klasse, die genauso funktioniert wie die von Tailwind: allein, mit jeder Variante und auch in @apply. Nach @utility schreibst du den Namen der Klasse (ohne Punkt) und dann die Deklarationen, wie in einer Regel:

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

Die Eigenschaft background-image malt ein Bild in den Hintergrund eines Elements, über seine Hintergrundfarbe. Das Bild ist hier keine Datei: repeating-linear-gradient() lässt den Browser Streifen malen, um 45 Grad geneigt (45deg). Sie wechseln sich alle 12 Pixel ab: ein durchsichtiger, durch den die Hintergrundfarbe scheint, und ein weißer mit halber Deckkraft. Auf unserem hellorangen Hintergrund sehen sie so aus:

Jetzt ist bg-streifen eine Klasse wie jede andere: Du kannst md:bg-streifen, hover:bg-streifen und so weiter schreiben. Sie liegt in der Ebene utilities, gewinnt also gegen Klassen wie .knopf. Und Tailwind erzeugt ihr CSS nur, wenn eine Seite sie verwendet, wie bei seinen eigenen Klassen. Benenne deine Utilities so wie Tailwind: danach, was sie ändern und wie (bg- für den Hintergrund).