Design Tokens im Frontend: Konsistenz durch CSS-Variablen

Design Tokens sind die grundlegenden Bausteine moderner Design-Systeme und speichern Werte wie Farben, Abstände oder Schriftgrößen zentral. Im Frontend ermöglichen sie konsistente Styles über Projekte hinweg, besonders mit Tailwind CSS v4, wo sie als CSS-Variablen im @theme-Block definiert werden.​

Tokens trennen Design-Entscheidungen von Code-Implementierung und erleichtern Theming, Dark-Mode-Wechsel oder Skalierung in Teams. Sie reduzieren Duplikate und machen Refactoring einfach – ändern Sie einen Token, aktualisiert sich alles automatisch.

Tokens in Tailwind CSS v4 definieren

Tailwind v4 integriert Tokens nahtlos über @theme in CSS-Dateien, ohne JavaScript-Konfig.

1@theme {
2  /* Farben */
3  --color-primary: #3b82f6;
4  --color-primary-dark: #1d4ed8;
5  
6  /* Spacing */
7  --spacing-xs: 0.5rem;
8  --spacing-s: 1rem;
9  --spacing-m: 1.5rem;
10  
11  /* Typography */
12  --font-size-xl: 2.5rem;
13  --font-weight-bold: 700;
14}
15
Copy

Diese Variablen werden automatisch als Tailwind-Utilities verfügbar, z. B. text-[--font-size-xl].​

Praktische Anwendung in Komponenten

1// Button.jsx
2function Button({ variant = 'primary', children }) {
3  return (
4    <button 
5      className={`
6        px-[--spacing-m] py-[--spacing-s] 
7        rounded-lg font-[--font-weight-bold]
8        ${variant === 'primary' 
9          ? 'bg-[--color-primary] text-white hover:bg-[--color-primary-dark]' 
10          : 'bg-gray-200 text-gray-900'
11        }
12      `}
13    >
14      {children}
15    </button>
16  );
17}
18
Copy

Für Dark Mode: Definieren Sie html.dark { --color-primary: #60a5fa; }.​