Sobald ein Projekt wächst, wiederholen sich bestimmte Klassenkombinationen - ein Karten-Layout, ein Primär-Button, eine Badge. Statt diese Kombination an zehn Stellen im Projekt zu kopieren, lohnt es sich, eigene Design-Tokens und Komponenten-Klassen zu definieren.

Design-Tokens als @theme-Variablen

Design-Tokens sind benannte, wiederverwendbare Werte - Farben, Abstände, Schriftgrößen. In Tailwind v4 werden sie als CSS-Custom-Properties innerhalb von @theme definiert (siehe Kapitel 11). Für ein wachsendes Projekt lohnt es sich, diese Werte an einer Design-Sprache statt an einer Einzelseite auszurichten:

@import 'tailwindcss';

@theme {
  /* Markenfarben */
  --color-brand-dark: #1a2332;
  --color-brand-slate: #475569;
  --color-brand-accent: #0ea5e9;
  --color-brand-accent-dim: #0369a1;
  --color-brand-red: #dc2626;

  /* Wiederkehrende Abstände */
  --spacing-section: 4rem;
  --spacing-card: 1.5rem;
}

Eigene Komponenten-Klassen mit @apply

Für wirklich wiederkehrende Kombinationen (nicht für jedes einzelne Element!) lässt sich mit der @apply-Direktive eine eigene, semantische CSS-Klasse aus mehreren Utility-Klassen bauen:

@layer components {
  .card {
    @apply rounded-xl border border-slate-200 bg-white p-6 shadow-sm;
  }

  .btn-primary {
    @apply inline-block rounded-lg bg-brand-accent px-5 py-2.5
           font-semibold text-white transition hover:bg-brand-accent-dim;
  }
}

Im Template wird daraus eine einzige, sprechende Klasse:

<div class="card">
    <a href="#" class="btn-primary">Kontakt aufnehmen</a>
</div>

Token-Namen konsistent halten

Ein gutes Namensschema für Farb-Tokens macht spätere Erweiterungen leicht vorhersagbar: brand-* für Markenfarben, brand-accent-dim für eine abgedunkelte Variante des Akzents (wird z. B. auch von der tip()-Callout-Komponente dieses Projekts genutzt), statt willkürlicher Namen wie blue-special.