Arbitrary Values und ihre Kosten

Mit der Syntax für beliebige Werte von Tailwind können Sie jeden CSS-Wert direkt in einem Klassennamen verwenden, indem Sie die eckige-Klammer-Notation nutzen. Statt auf Tailwinds vordefinierte Skala beschränkt zu sein, können Sie w-[347px], text-[#1a2b3c] oder grid-cols-[1fr_2fr_1fr] schreiben.

Diese vom JIT-Engine aktivierte Funktion gehört zu Tailwinds leistungsfähigsten Möglichkeiten. Sie überbrückt die Lücke zwischen Utility-Klassen und den seltenen Fällen, in denen tatsächlich ein präziser Wert außerhalb der Skala erforderlich ist.

Die Klammer-Syntax funktioniert mit jedem Utility-Präfix von Tailwind. Der Wert innerhalb der Klammern wird direkt als CSS-Wert übergeben. Leerzeichen innerhalb des Werts werden durch Unterstriche dargestellt (Tailwind ersetzt sie vor dem Parsen).

Bei Utilities, die mehrere CSS-Eigenschaften erzeugen, erhält nur die jeweils relevante Eigenschaft den beliebigen Wert. Beispielsweise setzt p-[12px] alle vier Padding-Werte auf 12px – genau wie p-4, jedoch mit einem benutzerdefinierten Wert.

Beliebige Werte sind in bestimmten Situationen sinnvoll:

• Präzise Positionierung: Ein Tooltip, der exakt an einem Referenzpunkt ausgerichtet sein muss (top-[3px])
• Externe Vorgaben: Die Höhe oder den Eckenradius einer Drittanbieterkomponente übernehmen
• Einzigartige Markenfarben: Eine Markenfarbe, die nicht gut in die Tailwind-Palette passt (bg-[#e63946])
• Dynamische CSS-Ausdrücke: Werte mit calc, min, max oder clamp

Für Werte, die in das Designsystem gehören, sind sie NICHT geeignet – verwenden Sie dafür eine Theme-Erweiterung.

Wenn ein Wert an mehreren Stellen in Ihrem Projekt verwendet wird, gehört er in die Theme-Erweiterung und nicht als beliebiger Wert in den Code. Wenn Sie ihn zum Theme hinzufügen, erhält er einen semantischen Namen, bleibt konsistent und kann an einer einzigen Stelle geändert werden.

Eine gute Faustregel: Wenn Sie einen beliebigen Wert in verschiedenen Dateien zweimal verwenden, übernehmen Sie ihn in das Theme. Erscheint er nur einmal in einem sehr spezifischen Kontext, ist der beliebige Wert in Ordnung.

Jeder eindeutige beliebige Wert erzeugt eine eindeutige CSS-Regel. Fünf Verwendungen von w-[347px] in derselben Datei erzeugen dank der Deduplizierung durch JIT nur eine CSS-Regel. Verwenden verschiedene Komponenten jedoch w-[347px], w-[348px] und w-[349px], erzeugt jeder Wert eine eigene Regel – insgesamt drei Regeln für Werte, die sich nur um ein Pixel unterscheiden.

Das ist der Preis beliebiger Werte: Sie können die CSS-Wiederverwendung zunichtemachen, die Utility-Klassen so effizient macht. Zehn geringfügig unterschiedliche beliebige Breiten erzeugen zehn separate Regeln statt einer gemeinsam verwendeten Utility.

Neben Utility-Präfixen unterstützt Tailwinds JIT auch beliebige CSS-Eigenschaften mit der Syntax [property:value] – einer eckigen Klammer, die einen CSS-Eigenschaftsnamen und einen durch einen Doppelpunkt getrennten Wert enthält.

Dies ist der Ausweg für CSS-Eigenschaften, für die Tailwind keine Utility besitzt, etwa [mask-image:linear-gradient(...)], [scroll-snap-type:x_mandatory] oder Eigenschaften mit Vendor-Präfix. Verwenden Sie dies sparsam – wenn Sie viele beliebige Eigenschaften benötigen, sollten Sie stattdessen ein Tailwind-Plugin hinzufügen.

Beliebige Werte lassen sich vollständig mit allen Variantenpräfixen kombinieren. Sie können responsive Varianten sowie hover-, focus-, dark- und andere Varianten mit jedem beliebigen Wert verbinden – genauso wie mit standardmäßigen Utilities.

Dadurch steht Ihnen das gesamte Variantensystem von Tailwind auch für benutzerdefinierte Werte zur Verfügung. Eine benutzerdefinierte Hover-Farbe außerhalb der Skala, eine responsive benutzerdefinierte Breite oder ein beliebiger Farbwert für den Dark Mode funktionieren problemlos.

Bei beliebigen Hex-Farben können Sie mit einem Schrägstrich zusätzlich den Transparenzmodifikator anwenden: bg-[#e63946]/50 setzt den Hintergrund auf 50 % Transparenz. Dies funktioniert, weil die Transparenzsyntax mit Schrägstrich eine JIT-Funktion ist, die unabhängig davon greift, ob die Grundfarbe aus der Palette stammt oder ein beliebiger Wert ist.

Sie können auch rgba()- oder hsl()-Funktionen direkt innerhalb der Klammern verwenden, um Transparenz oder das Farbmodell beliebig zu steuern.

Einige Zeichen innerhalb beliebiger Werte müssen maskiert werden, weil sie in CSS oder HTML eine Bedeutung haben. Verwenden Sie in beliebigen Tailwind-Werten Unterstriche für Leerzeichen (Tailwind wandelt sie automatisch um) und maskieren Sie Klammern sowie andere Sonderzeichen innerhalb von calc(), indem Sie Leerzeichen innerhalb der Funktion durch Unterstriche ersetzen.

Bei URL-Werten (etwa für Hintergrundbilder) setzen Sie den Wert in einfache Anführungszeichen: bg-[url('/img/hero.png')]. Tailwind übernimmt die einfachen Anführungszeichen in das generierte CSS.

Durchsuchen Sie Ihre Codebasis regelmäßig nach allen Verwendungen beliebiger Werte, um Kandidaten für eine Übernahme in das Theme zu identifizieren. Ein kurzer grep-Befehl findet jede Klasse mit Klammern in Ihrem Projekt:

Jeder Wert, der in verschiedenen Dateien mehr als zweimal vorkommt, eignet sich sehr gut als benanntes Theme-Token. Ein einmalig vorkommender Wert kann problemlos beliebig bleiben. Werte, die zu einer konsistenten Skala zu gehören scheinen (wie w-[350px], w-[360px], w-[370px]), zeigen, dass ein Muster außerhalb der Skala standardisiert werden sollte.

Beliebige Werte lassen sich in derselben Klassenzeichenfolge ganz natürlich mit standardmäßigen Utility-Klassen kombinieren. Sie können Utilities der Skala und beliebige Werte frei mischen – das ist beabsichtigt und kein Workaround. Das Designsystem deckt 95 % der Fälle mit Utilities der Skala ab; beliebige Werte füllen die verbleibenden 5 %.

Die wichtigste Regel lautet, zuerst Utilities der Skala zu verwenden und erst dann auf beliebige Werte zurückzugreifen, wenn die Skala tatsächlich nicht das Benötigte bietet. Setzen Sie diese Regel in Code-Reviews durch, damit Ihr Markup nicht zu einer Sammlung von Werten außerhalb der Skala wird.

In dieser Lektion haben Sie Folgendes gelernt: beliebige Werte verwenden die Klammer-Syntax [value], um mit JITs bedarfsgesteuerter Generierung beliebige CSS-Werte für jede Utility festzulegen; jeder eindeutige beliebige Wert erzeugt eine eindeutige CSS-Regel, weshalb wiederholt verwendete Werte außerhalb der Skala dateiübergreifend in das Theme übernommen werden sollten; und Unterstriche stellen Leerzeichen innerhalb beliebiger Werte dar (z. B. calc(100%_-_64px)). Damit endet der Kurs zu JIT und Produktionsoptimierung – als Nächstes beschäftigen wir uns mit Design-Tokens und systematischem Theming.