Werte außerhalb der Skala

Manchmal brauchst du einen Wert, den die Skala oder die Palette nicht hat: eine Farbe aus dem Logo des Tierheims, ein exaktes Maß aus der Zeichnung eines Designers oder einen Prozentwert. Dafür lässt dich Tailwind jeden CSS-Wert in eckigen Klammern hinter den Namen einer Klasse schreiben. Das sind beliebige Werte (englisch arbitrary values):

Tailwind erzeugt das CSS für eine solche Klasse, wenn es sie in deinen Dateien findet, genau wie für jede andere Klasse. In den Klammern dürfen keine Leerzeichen stehen: Ein Leerzeichen trennt Klassen, aus w-[350 px] werden also zwei Klassen, die es nicht gibt, und nichts passiert.

Beliebige Werte sind praktisch, verwende sie aber nur als Ausnahme. Jeder von ihnen ist ein kleiner Schritt weg von der Skala und der Palette, und wenn es viele sind, passen die Abstände und Farben der Seite nicht mehr zusammen. Wenn du dich dabei ertappst, p-[15px] zu schreiben: p-4 (16 Pixel) ist mit ziemlicher Sicherheit genauso gut. Und eine Farbe, die du auf vielen Seiten verwendest, fügst du besser unter einem eigenen Namen zum Theme von Tailwind hinzu, wie du in der Lektion über das Anpassen von Tailwind lernst.

Die Plakate und Flyer des Tierheims sind auf cremefarbenes Papier gedruckt, #fdf6ec , und Lunas Seite soll dieselbe Farbe haben. Die Palette hat sie nicht, für eine einzelne Seite ist ein beliebiger Wert also genau richtig.