Kapitel 5 hat den Build-Prozess gezeigt - jetzt geht es um Tailwind selbst: wie Utility-Klassen funktionieren und wie Tailwind CSS v4 mit seinem CSS-first-Ansatz konfiguriert wird.

Utility-first, kurz erklärt

Statt eigener CSS-Klassen wie .team-card mit eigenen Regeln in einer separaten CSS-Datei, kombiniert Tailwind viele kleine, einzweckige Utility-Klassen direkt im HTML: eine Klasse für Innenabstand, eine für Rahmenradius, eine für Schriftgröße, und so weiter.

<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
    <h3 class="text-lg font-bold text-brand-dark">Anna Beispiel</h3>
    <p class="text-sm text-brand-slate">Entwicklung</p>
</div>

Der Vorteil gegenüber eigenem CSS: Man muss beim Lesen des Templates nicht in eine separate Datei springen, um zu sehen, wie ein Element aussieht - die Klassen sind das Styling. Der vermeintliche Nachteil ("viele Klassen im HTML") relativiert sich schnell, sobald man wiederkehrende Kombinationen in eigene Komponenten-Klassen auslagert (Kapitel 12).

Tailwind v4: CSS-first mit @theme

In älteren Tailwind-Versionen (v2/v3) lag die gesamte Konfiguration - Farben, Abstände, Breakpoints - in einer tailwind.config.js. Ab Tailwind CSS v4 verschiebt sich das primär ins CSS selbst, über die @theme-Direktive (wie bereits in Kapitel 5 gezeigt):

@import 'tailwindcss';

@theme {
  --color-brand-dark: #1a2332;
  --color-brand-slate: #475569;
  --color-brand-accent: #0ea5e9;
  --spacing-card: 1.5rem;
  --breakpoint-3xl: 1920px;
}

Jede --color-*-Variable erzeugt automatisch passende Utility-Klassen (text-brand-dark, bg-brand-dark, border-brand-dark, ...). Genauso erzeugt --breakpoint-3xl automatisch einen 3xl:-Responsive-Präfix. Es gibt keine zwei getrennten Wahrheiten mehr (JS-Config vs. tatsächliches CSS) - die Konfiguration ist das CSS.

Wichtige Utility-Kategorien im Überblick

• Spacing - p-4, px-6, mt-10, gap-4
• Typografie - text-lg, font-bold, leading-relaxed
• Farben - text-brand-dark, bg-white, border-slate-200
• Layout - flex, grid, grid-cols-3, gap-6
• Zustände - hover:bg-brand-accent, focus:ring-2

Wo die eigentliche Tailwind-Konfiguration im Projekt liegt

Für dieses Projekt liegt die zentrale Konfigurationsdatei unter app/design/frontend/Mironsoft/default/web/tailwind/src/styles.css. Jede neue Farbe, jeder neue Breakpoint für ein neues Feature - wie die Team-Seite ab Kapitel 17 - wird genau dort eingetragen, nicht in einer tailwind.config.js.