Blog-Artikel

Tailwind CSS: ein neuer Ansatz für die Verwendung von Cascading Style Sheets

Development
Frontend
Das Schreiben und die Wartung von CSS hat unser Design- und Development-Team häufig vor wiederkehrende Probleme gestellt. Mit Tailwind verwenden wir ein Framework, das uns viel Arbeit abnimmt, ohne uns von unseren eigenen Ideen zu entfernen.

Was ist TailwindCSS?

Tailwind bietet ein System konsistenter CSS-Utility-Klassen. Diese decken alle Anforderungen an ein Designsystem auf CSS-Ebene ab und erleichtern die Konsistenz von Farbwahl, Abständen, Typografie, Schatten etc.

Warum nutzen wir TailwindCSS?

Zuerst erscheint der Verzicht auf die Atomic-Struktur für Unordnung zu sorgen, entfällt doch die gewohnte Sortierung der Klassen in thematisch geordneten Dateien. Der Vorteil erschließt sich jedoch schnell: die Vergabe von Namen von CSS-Klassen entfällt; die Tailwind-Klassennamen werden direkt in das Klassen-Attribut des jeweiligen HTML-Tags geschrieben. Die Pflege und Strukturierung von gesonderten CSS-, LESS- oder SASS-Dateien entfällt nahezu vollständig. Zudem wird ein häufig auftretendes Dilemma gelöst: die Duplizierung von Klassen-Blöcken, die minimale Unterschiede aufweisen.

Für Entwicklerteams bedeutet das im Bezug auf Style Sheets ein einheitliches Vokabular, anhand der Klassennamen wird schnell ersichtlich, was an der jeweiligen Stelle erzeugt werden soll.

Zudem entwickelt sich das System ständig weiter: mussten beispielsweise spacing-Angaben außerhalb der vorgegebenen Skala in Version 2 noch in einer Config-Datei deklariert werden, können diese in Tailwind 3 über eine Klammer-Notation einfach an die entsprechende Klasse angehängt werden.

TailwindCSS & Single Page Components

Durch die direkte Verwendung der Klassennamen in HTML-Elementen und den Wegfall gesonderter CSS-Dateien erschließt sich der Vorteil von Tailwind-Klassen besonders im Konzept der Single Page Components: alle benötigten Auszeichnungen werden in einer Datei gepflegt; die <style>-Sektion enthält nur noch wenige Angaben.