Migration von Bootstrap zu Tailwind CSS

Das primäre Ziel der Umstellung der Website von Bootstrap auf Tailwind CSS lag darin, mehr Kontrolle über den Code zu erlangen und eine flexiblere technische Grundlage für zukünftige Erweiterungen und Verbesserungen des Designs der Website zu schaffen.

Bootstrap beinhaltet neben Utility-Klassen auf Basis von CSS vor allem visuelle bzw. interaktive Komponenten, die auf CSS, JavaScript und SVG basieren. Diese mitgelieferten Komponenten können die Entwicklung einer Website zweifelsfrei erleichtern. Um die Gestaltung und Funktionsweise der Komponenten von Bootstrap anzupassen oder zu erweitern, muss man sich jedoch mit den technischen Eigenarten und Einschränkungen von Bootstrap befassen, anderenfalls würden alle Websites, die auf Bootstrap basieren, mehr oder weniger gleich aussehen. Die Programmierung von CSS bzw. Sass ist hier nahezu unumgänglich, um bestehende Komponenten gestalterisch anzupassen oder um eigene Komponenten für die eigene Website zu entwickeln.

Tailwind CSS verfolgt hier einen etwas anderen Ansatz: Es beinhaltet keine vorgefertigten Komponenten, sondern lediglich eine umfangreiche Sammlung von sog. Utility-Klassen auf Basis von CSS. Diese Utility-Klassen ermöglichen es Entwicklern, weitgehend direkt im HTML-Markup zu arbeiten, ohne auf zusätzliches benutzerdefiniertes CSS zurückzugreifen.

Tailwind CSS schränkt Entwickler technisch nicht dabei ein, eigenen CSS-Code zu schreiben, rät aber davon ab. Stattdessen empfehlen die Entwickler von Tailwind CSS, sich darauf konzentrieren, Layouts und wiederverwendbare Komponenten mit den bevorzugten Programmiersprachen und Frameworks zu schreiben und deren Design lediglich mit HTML und Class-Attributen zu definieren, die Tailwind CSS bereitstellt.

Dadurch entfällt das häufige Wechseln zwischen HTML- und CSS-Programmierung, was den Workflow beschleunigt und die Produktivität steigert. Sobald man mit den Utility-Klassen von Tailwind CSS vertraut ist, lässt sich das Erscheinungsbild einer Website schnell und flexibel gestalten.

Im ersten Schritt der Umstellung von Bootstrap auf Tailwind CSS habe ich bewusst das grundlegende Layout und Design der Website der Hardin Software GmbH nur sehr geringfügig verändert, um die Migration nicht unnötig kompliziert zu machen. Schon nach dieser Migration zeigen sich einige bemerkenswerte Vorteile.

Die CSS-Datei konnte von komprimiert 72 KB auf 7 KB bzw. von unkomprimiert 411 KB auf 32 KB verringert werden. Der Wegfall des JavaScript-Codes von Bootstrap führte zu einer Verringerung des JavaScript-Codes von komprimiert 56 KB auf 1,5 KB sowie von unkomprimiert 170 KB auf 2 KB.¹

Diese starke Reduktion des Codes zeigt das Potenzial von Tailwind CSS, das Design effizienter und verständlicher zu machen. Das sorgt nicht nur für kleinere Dateigrößen, sondern auch für eine schnellere Ladezeit und bessere Performance.¹

Unabhängig von Bootstrap oder Tailwind CSS verwendete die Website bislang den sog. System Font Stack, um die Texte darzustellen, also (nur) Schriftarten, die mit den Betriebssystemen der Benutzer mitgeliefert werden. Das verkürzte die Ladezeit, weil die Webbrowser keine Schriftart herunterladen mussten, aber das bedeutete leider auch, dass die Website in den Browsern verschiedener Betriebssysteme unterschiedlich dargestellt wurde.

Mit der Umstellung auf Tailwind CSS habe ich die Inter Typeface Family als Schriftfamilie in die Website integriert, um ein modernes und einheitliches Erscheinungsbild in allen gängigen Browsern auf allen gängigen Betriebssystemen zu erreichen. Die Schriftart wird vom Webbrowser automatisch heruntergeladen. Das kann beim ersten Aufruf der Website eine sehr kurze Verzögerung bis zur Darstellung bewirken. Für diese sehr kurze Verzögerung habe mich bewusst entschieden, weil ich ein ansprechendes und einheitliches Design auf allen Betriebssystemen für wichtig halte.²

Mein Fazit: der Wechsel von Bootstrap zu Tailwind CSS und von jQuery zu Vanilla JS bietet mir mehr Flexibilität und Verständlichkeit beim Design und der Programmierung des Web Frontends. Durch die Reduktion der Dateigrößen ist die Website auch performanter geworden. Diese Umstellung schafft für mich eine solide Grundlage, um das Design und somit auch die Funktionalität der Website erweitern und verbessern zu können.