Frontend
Tailwind CSS
Tailwind CSS ist ein Utility-first-CSS-Framework, das ein Designsystem in Code übersetzt. Warum ich es für einheitliches, wartbares Styling nutze.
KI-Zusammenfassung anfordern
Tailwind CSS ist ein CSS-Framework aus kleinen Utility-Klassen: Abstände, Farben, Typografie und Layout werden direkt im Markup gesetzt, auf Basis einer gemeinsamen Konfiguration von Design-Tokens.
Stärken: was es gut kann
- Designsystem im Code: Farben, Größen und Abstände kommen aus einem Theme, jede Seite nutzt dieselben Werte.
- Kleines CSS: Im Stylesheet landen nur die Klassen, die wirklich verwendet werden.
- Responsive und Zustände: Breakpoints, Hover, Fokus, Dark Mode und reduzierte Bewegung direkt am Element.
- Wartbar: Styles leben bei der Komponente, wer eine Komponente ändert oder löscht, hinterlässt kein verwaistes CSS.
Grenzen: was zu bedenken ist
Lange Klassenlisten sind gewöhnungsbedürftig. Gute Komponenten und ein klares Theme halten das Markup lesbar, ohne sie werden auch Tailwind-Projekte so unübersichtlich wie jedes andere CSS.
Einsatz: wann ich es wähle
In den meisten Projekten, die ich baue, mit Astro, SvelteKit oder Next.js, eingerichtet mit den Tokens der Marke aus dem Designsystem. Diese Website nutzt Tailwind CSS.
