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.
• für One-offs: , .