Für Online-Händler wird es immer wichtiger bei den WebVitals von Google möglichst viele Punkte zu erreichen. Denn dadurch wird sich indirekt auch das Ranking verbessern. Deshalb sollten Händler einen Blick auf diese Werte werfen und sich mit Dingen wie blockierendem JavaScript oder ungenutztem CSS beschäftigen, um nur zwei Dinge zu nennen. 

Wenn man nach einer Möglichkeit sucht, ungenutztes CSS zu entfernen (purgen) dann landet man sehr schnell bei Tailwindcss, einem Utility First Framework. Allerdings wird im Core von Shopware 6 nativ auf Bootstrap gesetzt. Bootstrap setzt aber Komponenten ein, welche viel JavaScript mitbringen, was vom Browser interpretiert werden muss und leider bei vielen (nicht optimierten) Seiten zu blockierendem JavaScript führt. Zudem werden meistens nur wenige der Komponenten genutzt, obwohl diese alle im Browser geladen wurden. Wir haben uns also an die Herausforderung gewagt, Bootstrap aus Shopware 6 zu entfernen und stattdessen Tailwindcss mit alpine.js zu integrieren. Mit dem Ziel bei den WebVitals noch bessere Werte zu erreichen, sowie ein konfigurierbares Tailwindcss Theme zu erstellen. 

Unterschiede zwischen Bootstrap und Tailwindcss 

Bootstrap ist wie ein Toolkit mit fertigen Komponenten, Tailwindcss hat hingegen keine solchen Komponenten. Das klingt zunächst nach einem Pluspunkt für Bootstrap, doch wie viele Komponenten aus Bootstrap 4 verwenden Sie in einem normalen Projekt? Derzeit hat Bootstrap 4 insgesamt 21 Komponenten und jede davon hat verschiedene Variationen. Und davon benötigen die meisten zusätzliches JavaScript.
 

Der Button-Vergleich zeigt Ihnen welchen Vorteil Tailwindcss von Haus aus mitbringt: Wirklich kleine CSS-Dateien. Eines der Hauptziele von Tailwindcss ist es, dass der Frontend-Entwickler nur im HTML-DOM bzw. in der bevorzugten Template-Engine arbeitet. Sie müssen keinen eigenen CSS-/SASS-Code für Ihr individuelles Design schreiben. Sie verwenden eine Kombination von vordefinierten CSS-Regeln, die Sie in Templates anwenden. Um eine gewisse Dynamik zu ermöglichen, übergeben Sie Argumente an das zu inkludierende Template. Ihr Ziel sollte es also sein, logische und clevere Komponenten in Templates zu bauen und NICHT Templates zu bauen die von CSS-Klassen abhängig sind. 

Wie organisiere ich die vielen Klassen in Tailwindcss? 

Wenn Sie ein bisschen mit Tailwindcss gearbeitet haben, werden Sie sehr schnell feststellen, dass die größte Herausforderung darin liegt, den Überblick über die vielen Klassen (die sich häufig doppeln) nicht zu verlieren. Die Tailwind-Dokumentation gibt Ihnen dafür aber einige Hinweise und Werkzeuge an die Hand, wie Sie dies bewerkstelligen können. Sie werden schnell auf die @apply-Direktive stoßen, welche nicht ganz unumstritten ist. Unsere Empfehlung an dieser Stelle ist es, auf die Verwendung nach Möglichkeit ganz zu verzichten. Wir sehen das so: Eines der Kernprinzipien von Tailwindcss ist es, kein eigenes CSS zu schreiben und jetzt sollen/wollen Sie Ihre Klassen mit eigenen CSS-Klassen verwalten, die durch die apply-Direktive angewendet werden? Dies entspricht, unserer Meinung nach, nicht den Kernprinzipien von Tailwindcss. 

Einige Tipps, wie Sie Klassen organisieren können:  

• Erstellen Sie Templates für Komponenten, die Sie wiederverwenden können und die nicht von CSS-Klassen abhängen sind.  
• Verwenden Sie die Konfigurationsdatei von Tailwindcss, um Farben, Schriftarten, Breakpoints und vieles mehr zu konfigurieren und zu erweitern.  
• Wenn Sie Komponenten in mehr als einem Projekt benötigen, schauen Sie sich die addComponents-Funktion an, die Sie in Ihrer tailwindcss-Konfigurationsdatei verwenden können, um einfach zu übertragende Komponenten zu erstellen. 
  
  

Warum brauchen wir alpine.js? 

In einer perfekten Welt wäre es wunderbar, eine E-Commerce Seite ohne JavaScript betreiben zu können. Aber leider habe ich noch keine umfangreiche Seite (mitsamt Checkout, Tracking etc.) in der realen Online-Welt gesehen, die dies erreichte. Für gewisse Dynamiken wie z.B. das Öffnen einer Navigation oder dem Einblenden einer responsiv optimierten Navigation auf dem Smartphone ist es einfacher Javascript zu verwenden. Von Tailwindcss kommt man da sehr schnell zu alpine.js, es handelt sich dabei um eine wirklich kleine Bibliothek (7.1kB gezippt). Alpine.js wird auch das “Tailwindcss für JavaScript” genannt. 

Es gibt einen wirklich guten Blogbeitrag über alpine.js und seine Kernfunktionen wie Binding, Animationen, Events und vieles mehr, den Sie hier lesen können. 

Welche Schritte sind notwendig um Tailwindcss und alpine.js in Shopware 6 zu integrieren? 

Im Folgenden geben wir die einzelnen Schritte wieder, welche notwendig sind, um die Basis-Integration von Tailwindcss und alpine.js in Shopware 6 umzusetzen.

Tailwindcss Theme in Shopware 6 erstellen 

Sie brauchen nur diese drei Befehle (siehe Bild oben) um ein Theme-Skelett in Shopware 6 zu erstellen. Führen Sie diese Befehle in Ihrem Entwicklungsordner für Shopware 6 aus. Nach der Ausführung finden Sie neue Dateien unter custom/plugins/Tailwind. Prüfen Sie die Datei theme.json, hier können Sie das Theme konfigurieren. 

Build-Prozess für tailwindcss und apline.js aufsetzen 

Für den Build-Prozess verwenden wir Symfony Encore, das ist ein Wrapper für Webpack, der eine mächtige API mit vordefinierten Funktionen bietet, die Sie einfach verwenden können. So haben wir einen standardisierten Weg, um Webpack zu nutzen.  

Für mehr Details können Sie sich auch das Video aus dem Webinar mit Shopware 6 ansehen.  

Das PurgeCssPlugin entfernt nicht gebrauchtes CSS! Es sucht in jedem Twig-Template nach Tailwindcss-Klassen und fügt dem Build nur die verwendeten Klassen hinzu. Allerdings nur für den Produktion-Build. Wenn Sie den Development-Build bauen, werden alle Tailwindcss-Klassen in der generierten CSS-Datei enthalten sein. Die app.css Datei wird in der Entwicklung (Development) ca. 12 MB groß sein und die gleiche app.css Datei wird beim Produktion-Build nur eine Größe von ca. 6,1 KB haben. In der Entwicklung braucht man also nur einmal zu bauen und kann alle Klassen direkt im HTLM-DOM verwenden.  

Jetzt müssen wir nur noch die neu generierten Dateien in unser Tailwind Shopware 6 Theme einbinden. Dazu erweitern wir zwei Templates meta.html.twig und base.html.twig.  

Wichtig: Wir erweitern nur die Logik und zerstören nicht die normalen Shopware 6 Prozesse für JavaScript und SCSS-Dateien. Bedeutet Sie können diese Funktionen weiterhin nutzen und alle Plugins, die darauf aufbauen, funktionieren weiterhin. 

Kategorie-Navigation als erste Komponente mit Tailwindcss in Shopware 6 

Die erste Komponente, die wir erstellen werden, ist die Kategorie-Navigation. Sie wird auch eine responsive Navigation für Mobile enthalten. Zum Kickstart verwende ich eine Navigation, die von Jan Heise als Tailwindcss Komponente erstellt wurde (Demo oder Code ansehen).

Rückblickend war es nicht die beste Idee, mit einer Navigation anzufangen, denn wie man schnell feststellen kann, ist eine gute Navigation durchaus kompliziert. Ich habe mir die dazugehörigen Shopware 6 Templates angesehen, um nachzuvollziehen wie diese funktionieren. Das Shopware-Core Team hat schon sehr viele Anwendungsfälle berücksichtigt.

Ich habe in der Umsetzung versucht, die Struktur nicht zu verändern. Es wurden nur die Tailwindcss-Klassen und Alpine.js Properties hinzugefügt die notwendig waren damit die Navigation funktioniert. Zudem habe ich die Navigation auf eine Tiefe von 2 Stufen begrenzt. 

Die Admin-Konfiguration in den Theme-Build-Prozess integrieren 

Shopware 6 bietet eine klare Admin-Oberfläche, in der das Theme über den Admin-Zugang ohne einen Entwickler konfiguriert werden kann. Dort können Sie Farben, Schriftarten und Größen definieren. Unser Ziel war es, diese Konfiguration auch in dem Tailwindcss-Theme zu nutzen. 

Um dies zu erreichen, haben wir uns den Build-Prozess des Standard-Bootstrap-Themes angeschaut. Während der Analyse sind wir auf die folgende Datei gestoßen: var/theme-variables.scss 

Daraufhin haben wir eine neue Option für die Admin-Konfiguration vom Tailwindcss-Theme erstellt, eine Anleitung dafür gibt es in der Shopware 6 Dokumentation. Danach habe ich den Build-Prozess des Themes angestoßen und geprüft, ob die neue hinzugefügte Farbe, ebenfalls in der Datei theme-variables.scss geschrieben wird. Und ja, der Shopware 6 Core schreibt die neue Farbe ebenfalls in das genannte File, was bedeutet wir können uns die Core-Funktionalität zu Nutze machen. 

In unserer base.scss Datei habe ich die neu erstellte variables.scss Datei importiert und dort haben wir dann die theme-variables.scss Datei aus Shopware importiert. In unserer variables.scss habe ich ein Root-Element angelegt und die bekannten Variablen-Namen übergeben. 

Danach haben wir die tailwindcss-Konfigurationsdatei aktualisiert, um die neuen Variablen den entsprechenden Farben bzw. Farbe-Klassen zuzordnen (diese können dann nach dem Build im DOM verwendet werden). Sobald ein Admin-Benutzer nun die Farbe in der Admin-Theme-Konfiguration ändert und speichert, wird das Frontend sofort aktualisiert. 

Ausblick: Was können Sie von dem tailwindcss-Theme in Zukunft erwarten? 

Am Ende steht ein komplettes Tailwindcss-Theme für Shopware 6, welches eine möglichst hohe Punktzahl bei den WebVitals erreichen soll. Bis dahin gibt es aber noch eine Menge ToDos. 

Sie können helfen! Schauen Sie sich einfach das Shopware 6 Tailwindcss-Theme auf Github an.  

Testen Sie es, erstellen Sie weitere Komponenten, verbessern Sie die Templates und beteiligen Sie sich mit Pull-Requests an der Weiterentwicklung. Das Tailwindcss-Theme ist OpenSource und es wäre wirklich sehr schön, wenn wir in naher Zukunft, einige Shopware 6 E-Commerce Stores damit Live sehen würden.