Revision 722: Tailwind versus BEM, mit Jon Uhlmann

Wir sind diesmal zu viert: Schepp, Vanessa und Peter diskutieren mit Jon Uhlmann über Utility-First CSS und insbesondere Tailwind CSS. Jon war bereits mehrfach bei uns zu Gast und meldete sich nach unserer Diskussion in Revision 715, weil ihm unsere damalige Einordnung von Tailwind zu einseitig erschien.

Wir nehmen das zum Anlass, Tailwind noch einmal ausführlicher mit klassischem CSS, komponentenbasierten Ansätzen und BEM zu vergleichen. Dabei geht es weniger um ein einfaches Dafür oder Dagegen als um Wartbarkeit, lokale und globale Abhängigkeiten, Designsysteme, unterschiedliche CSS-Kenntnisse in Teams sowie die Frage, wie sich Utility-Klassen auf KI-generierten Code auswirken.

Unser Sponsor

Alle reden von Automation – aber wo betreibst du eigentlich deine Tools?

Egal ob n8n oder andere Container-Setups: Mit dem Container-Hosting von mittwald läuft deine Anwendung in wenigen Minuten. Die nervige Konfiguration? Geht easy von der Hand – inklusive Vorschlägen für Umgebungsvariablen und Entrypoints.

Also: Fang an zu automatisieren. Dein erster Schritt ist ein Hosting bei mittwald. 👉 mittwald.de/workingdraft

Shownotes

[00:01:44] Tailwind CSS zwischen Utility-Klassen, BEM und Scoped CSS In Revision 715 hatten wir eine Hörendenfrage zu Tailwind beantwortet und dabei unter anderem die These aufgestellt, dass das Framework vor allem Teams mit weniger ausgeprägten CSS-Kenntnissen helfe. Jon widerspricht weniger dem Nutzen dieser Funktion als der Beschränkung darauf: Tailwind könne nicht nur fehlende Kenntnisse ausgleichen, sondern auch erfahrenen CSS-Entwicklerinnen und -Entwicklern eine angenehmere Developer Experience bieten.

Wir vergleichen Tailwind zunächst mit BEM. Während BEM über semantische Klassennamen Komponenten und Varianten organisiert, setzt Tailwind auf präsentationsbezogene Utility-Klassen. Jon betrachtet beide Ansätze nicht als gegenseitigen Ersatz. Für komplexe Layouts oder Spezialfälle greift er weiterhin zu eigenem CSS, während sich wiederkehrende Abstände, Farben und einfache Layout-Eigenschaften gut mit Utilities abbilden lassen.

Tailwind nimmt Entwicklerinnen und Entwicklern das Verständnis von CSS nicht vollständig ab. Wer ein gutes Design umsetzen möchte, muss weiterhin wissen, wie Layout, Kaskade und CSS-Eigenschaften funktionieren. Das Framework liefert jedoch eine begrenzte Auswahl an Abständen, Farben und weiteren Design-Tokens. Dadurch kann es einen konsistenten visuellen Rhythmus fördern und gleichzeitig neue CSS-Funktionen sichtbar machen, die im Projekt bereits zuverlässig eingesetzt werden können.

Komponentenbibliotheken wie daisyUI oder shadcn/ui gehen noch einen Schritt weiter und stellen fertige Komponenten beziehungsweise wiederverwendbare Vorlagen bereit. Wir unterscheiden deshalb zwischen dem eigentlichen Utility-Ansatz und dem zusätzlichen Designsystem, den Konventionen und den Serviervorschlägen, die Tailwind mitbringt.

Ein kurzer Ausflug führt zu Tachyons. Das ebenfalls Utility-basierte Framework entstand unter anderem aus der