Utility-First CSS-Framework mit Design-Token-Pipeline.
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.
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.
@theme, dann bg-brand, font-sans etc.@apply sparsam — nur für echte Reuse-Patterns (z. B. .btn in einer kleinen @layer components).dark:-Variant + @media (prefers-color-scheme) oder class-Strategie.top-[117px]bg-[oklch(0.7_0.2_30)]cn()-Helper (clsx + tailwind-merge) für conditional classes ohne Konflikte.`bg-${color}-500`) werden nicht erkannt — Tailwind scannt statisch. Volle Klassen als Strings nutzen oder Safelist.tailwind.config.js mehr — alte Configs migrieren via npx @tailwindcss/upgrade.@layer base korrekt nutzen.@apply in CSS-Modules / Scoped-Styles braucht spezielles Setup.<h1> ist plain, list-styles weg. Bewusst.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.
Projekte(1)