Tokens in Tailwind, CSS-Variablen und CSS-in-JS

Die CSS-Plattformausgabe von Style Dictionary erzeugt eine Datei mit CSS Custom Properties: --color-primary-500: #3b82f6; --spacing-4: 16px; und so weiter. Diese Variablen werden auf :root definiert, wodurch sie global verfügbar sind. Dies bildet die Grundlage für die gesamte Nutzung von Tokens in der Anwendung.

Importieren Sie die generierte CSS-Token-Datei in Ihr globales Stylesheet oder in die Root-Layout-Komponente: @import './tokens/tokens.css'. In Next.js importieren Sie sie in app/layout.tsx oder styles/globals.css. Nach dem Import kann jede CSS-Regel und jede Komponente in der Anwendung auf die Custom Properties verweisen.

Referenzieren Sie CSS-Variablen in Komponenten-Stylesheets oder CSS Modules: background-color: var(--color-primary-500); und padding: var(--spacing-4);. Wenn sich der Tokenwert in der JSON-Quelle ändert, aktualisiert die erneute Erstellung mit Style Dictionary die CSS-Datei, und alle Komponenten, die diese Variable verwenden, übernehmen automatisch den neuen Wert.

CSS Custom Properties ermöglichen den Theme-Wechsel zur Laufzeit. Für den Dark Mode überschreiben Sie Tokenwerte unter einem Theme-Selektor: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }. Durch das Setzen von document.documentElement.setAttribute('data-theme', 'dark') schalten Sie alle Tokenwerte sofort um, ohne die Anwendung neu zu laden oder neu zu erstellen.

Erweitern Sie das Tailwind-Theme in tailwind.config.js, um Tokenwerte zu verwenden: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }. Importieren Sie die JS-Ausgabe von Style Dictionary in die Tailwind-Konfiguration, damit Tailwind-Klassen (bg-primary-500) stets die maßgeblichen Tokenwerte verwenden.

Für zur Laufzeit umschaltbare Themes in Tailwind konfigurieren Sie die Farbe so, dass sie auf eine CSS-Variable verweist: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'. Dafür muss Ihre CSS-Variable die RGB-Komponenten ohne den rgb()-Wrapper enthalten (--color-primary-rgb: 59 130 246). Tailwind übernimmt dann die Opazitäts-Utilities automatisch.

CSS-in-JS-Bibliotheken verwenden ein JavaScript-Theme-Objekt. Übergeben Sie die JS-Ausgabe von Style Dictionary als Wert des Theme-Providers: <ThemeProvider theme={tokens}>. Komponenten greifen über const theme = useTheme() und theme.color.primary[500] auf Tokens zu. Style Dictionary erzeugt das typisierte Token-Objekt; der Theme-Provider verteilt es.

Das stylelint-no-hardcoded-colors-Plugin und benutzerdefinierte ESLint-Regeln können erzwingen, dass keine fest codierten Hex-Werte in Stylesheets oder Komponentendateien vorkommen. Wenn Sie color: #3b82f6 statt color: var(--color-primary-500) schreiben, meldet der Linter einen Fehler. So bleibt das Token-System die einzige Farbquelle.

Wenn Tailwind-Klassennamen zur Laufzeit dynamisch aus Tokennamen zusammengesetzt werden, entfernt Tailwinds Purge-Prozess diese Klassen möglicherweise, weil sie im Quellcode nicht als statische Zeichenfolgen vorkommen. Fügen Sie dynamische Klassenmuster zur safelist in tailwind.config.js hinzu: safelist: [{ pattern: /bg-primary-/ }].

Das Figma Tokens Plugin exportiert Figma-Tokenwerte direkt in das JSON-Format von Style Dictionary. Der Ablauf: Designer aktualisieren Farben in Figma Variables, exportieren sie über das Plugin, committen das aktualisierte JSON, das Prebuild-Skript führt Style Dictionary aus und die aktualisierten CSS- und JS-Ausgaben werden in der React-App verwendet. Design und Code bleiben synchron.

CSS Custom Properties gelten für das Element, auf dem sie definiert sind, und dessen Nachfahren. Dadurch sind Theme-Überschreibungen auf Komponentenebene möglich: Eine Card-Komponente kann --color-background: var(--color-surface-elevated) an ihrem Stammelement setzen, und alle Nachfahren verwenden die Farbe der erhöhten Oberfläche, ohne dass Props durchgereicht werden müssen.

Was ist der entscheidende Vorteil von CSS Custom Properties (Variablen) für Design-Tokens gegenüber statischen Tailwind-Werten?

Style Dictionary gibt CSS Custom Properties für den globalen Import und JavaScript-Objekte für die Integration in Tailwind und CSS-in-JS aus. CSS-Variablen ermöglichen den Theme-Wechsel zur Laufzeit über Überschreibungen von [data-theme]. Tailwind erweitert seine Konfiguration mit Tokenwerten aus der JS-Ausgabe; für Themes mit Opazitätsunterstützung konfigurieren Sie Tailwind so, dass es auf RGB-CSS-Variablen verweist. Lint-Regeln erzwingen die ausschließliche Verwendung von Tokens für Farben und halten hartcodierte Werte aus der Codebasis fern.