Tailwind CSS

Was ist es?

Tailwind CSS ist ein Utility-First-Framework — Styles werden via atomare Klassen direkt im Markup komponiert. Version 4 ist ein Komplett-Rewrite: Rust-Engine (Oxide), CSS-first-Config via @theme, kein tailwind.config.js mehr nötig.

Quickstart

pnpm add tailwindcss@latest @tailwindcss/postcss

In globals.css:

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.7 0.15 200);
  --font-sans: "Geist", sans-serif;
}

Kein content-Array mehr — Tailwind v4 scannt automatisch.

Typische Patterns

• Design-Tokens als CSS-Custom-Properties über @theme, dann bg-brand, font-sans etc.
• @apply sparsam — nur für echte Reuse-Patterns (z. B. .btn in einer kleinen @layer components).
• Dark-Mode via dark:-Variant + @media (prefers-color-scheme) oder class-Strategie.
• Arbitrary Values für One-offs: top-[117px], bg-[oklch(0.7_0.2_30)].
• cn()-Helper (clsx + tailwind-merge) für conditional classes ohne Konflikte.

Gotchas / Was oft schiefgeht

• Dynamische Klassennamen (`bg-${color}-500`) werden nicht erkannt — Tailwind scannt statisch. Volle Klassen als Strings nutzen oder Safelist.
• v4 hat keine tailwind.config.js mehr — alte Configs migrieren via npx @tailwindcss/upgrade.
• Specificity-Konflikte mit globalen Styles: @layer base korrekt nutzen.
• @apply in CSS-Modules / Scoped-Styles braucht spezielles Setup.
• Preflight resetet aggressiv — <h1> ist plain, list-styles weg. Bewusst.

Wann nicht?

Strenge Design-Systeme mit Token-Pipeline (Style Dictionary) und Designer-Vorgabe — dann CSS-Variables direkt oder vanilla-extract. Bei sehr kleinen Sites kann plain CSS schneller sein.