Tokens statt geratener Farbwerte

Ein besonderes Risiko in Frontend-Projekten sind fest eingetragene Farbwerte und Pixelangaben. Sobald ein Agent #ff0000 oder padding: 14px direkt in eine Komponente schreibt, beginnt das System auseinanderzulaufen.

Modelle verhalten sich so, weil ihnen dieses Muster häufig begegnet ist. Auf die Anweisung „bau einen roten Löschen-Button“ folgt daher schnell ein bg-red-500, auch wenn das eigene Token anders heißt.

Drei Stufen

Primitive Tokens sind Rohwerte: color.red.600 = #da1e28. Komponenten greifen nie direkt darauf zu.
Semantische Tokens benennen eine Absicht: color.surface.danger verweist auf den Rohwert und enthält die Regel, wofür es gedacht ist.
Komponenten-Tokens binden die Absicht an eine Stelle: button.danger.background.

Diese Dreiteilung ist verbreitete Praxis; die Namen dienen als Beispiele.

Tailwind v4: Standardfarben abschalten

In Tailwind CSS v4 lassen sich die mitgelieferten Farben entfernen und nur die eigenen freigeben. Beides ist in der Dokumentation zu Theme-Variablen beschrieben:

:root {
  --surface: #ffffff;
  --danger: #da1e28;
}

@theme {
  /* alle Standardfarben von Tailwind entfernen */
  --color-*: initial;
}

@theme inline {
  --color-surface: var(--surface);
  --color-danger: var(--danger);
}

Ich habe das mit Tailwind 4.3 nachgeprüft. Anschließend stehen bg-surface und bg-danger zur Verfügung, bg-blue-500 dagegen nicht mehr. Die Aufteilung auf @theme und @theme inline steht so nicht wörtlich in der Dokumentation, dort sind beide Teile einzeln beschrieben.

Entgegen einer naheliegenden Erwartung bricht der Build dadurch nicht ab. Die Klasse erzeugt lediglich keine Regel, und das Element bleibt ungefärbt. Damit solche Fälle auffallen, ist zusätzlich ein Linter erforderlich, der unbekannte Klassen meldet, etwa eslint-plugin-better-tailwindcss mit der Regel no-unknown-classes (bis Version 3 hieß sie no-unregistered-classes).

Da die Klassen auf Variablen verweisen, lässt sich als Nebeneffekt ein dunkles Farbschema umsetzen, indem man die Variablen an einer Stelle überschreibt.

Grenzen der Sperre

Die Sperre entfernt ausschließlich die Standardpalette. Beliebige Werte in eckigen Klammern erzeugt Tailwind weiterhin, sodass bg-[#ff0000] oder p-[14px] genauso funktionieren wie vorher, ebenso style="color:#f00". Ein richtiges Token an der falschen Stelle fällt ohnehin nicht auf. Beides muss eine Prüfung in der Pipeline abfangen, etwa ein Linter, der Klassen mit [# verbietet. Darum geht es im nächsten Teil.

Aus der Reihe „Design Systems und KI“. Zurück: Verträge statt Aufsätze: Komponenten maschinenlesbar beschreiben. Weiter: Wer prüft den Code der Agenten?.