Tailwind: So entwickeln Sie Ihre Seite nach Ihren Vorstellungen

Das Utility-First-Framework Tailwind schafft ein System, dass es Shopbetreiber:innen erlaubt, ihrer Kreativität freien Lauf zu lassen. Dabei bergen Funktionserweiterungen oder individuelle Designideen keine unüberwindbaren oder kostspieligen Herausforderungen, wie das bei herkömmlichen Frameworks häufig der Fall ist. Stattdessen schafft Tailwind ein System, das sich durch seinen hohen Individualisierungsgrad und Einfachheit auszeichnet. Hier erfahren Sie, wie es das macht und weshalb dieser Ansatz auch bei der Nutzung von E-Commerce-Plattformen wie Shopify sinnvoll ist.

Was ist Tailwind CSS?

Tailwind ist ein Low-level CSS Framework, das Nutzer:innen die schnelle und unkomplizierte Umsetzung individueller Layouts ermöglicht. Dabei verbindet es Design und HTML. Die von Adam Wathan entwickelte Lösung schafft kleine, leicht austauschbare Einheiten. Diese Einheiten (auch Utility Klassen genannt), erlauben es Nutzer:innen Komponenten mittels unterschiedlicher Parameter zu gestalten.

Low-level vs. High-level Framework

Generell wird in Bezug auf Frameworks zwischen Low- und High-level unterschieden.

Zu den bekanntesten High-level Frameworks zählen dabei zum Beispiel WordPress und Drupal. Diese Systeme bieten Nutzer:innen eine weitgehend funktionierende Website, sozusagen „Out-of-the-box“. Wollen Nutzer:innen die Funktionalität erweitern, stehen zumeist eine Vielzahl an Open-Source-Lösungen zur Verfügung. Geht es um eine sehr individuelle Funktionserweiterung, ist die Grenze von High- level Frameworks aber schnell erreicht. Solche sind zumeist nur unter hohem Zeit- und somit Kostenaufwand realisierbar.

Low-level Frameworks, wie Tailwind eines ist, bedürfen im Gegensatz dazu von vornherein mehr Arbeit, um eine funktionierende und schöne Website zu erstellen. Komponenten müssen hierbei eigenständig gebaut und zusammengestellt werden. Dies bietet auf der anderen Hand ein hohes Maß an Individualisierungsmöglichkeiten. Zudem sind individuelle Anpassungen hierbei kein Problem und somit auch nicht mit erhöhten Kosten verbunden. Es braucht allerdings ein gewisses Maß an Know-how für die Arbeit mit einem Low-level Framework.

Wie funktioniert Tailwind?

Tailwind ermöglicht die Umsetzung eines Layouts ohne das Verlassen des HTML-Codes. Dabei stehen Entwickler:innen Utility-Klassen zur Verfügung, mithilfe derer eigene UI Komponenten erstellt und Design-Eigenschaften wie zum Beispiel CSS-Attribute (z. B. Farbe) oder Textausrichtung gesteuert werden können. Designinformationen werden im Markup (z. B. HTML) gespeichert, was CSS-Dateien überflüssig macht.

Tailwind CSS leitet dabei alle Funktionen von CSS-Stilen ab und stellt diese in Klassen zusammen. Vorgefertigte, mit CSS gestylte UI-Komponenten, wie sie für klassische Ansätze üblich sind, gibt es bei Tailwind nicht. Diese haben aber ohnehin häufig den Nachteil, dass sie Seiten sehr ähnlich aussehen lassen, da sie vorgeben, wie Buttons & Co. auszusehen haben.

Tailwind vs. konventionelle Ansätze: ein Beispiel

Klingt kompliziert? Finden wir auch! Daher hier ein Beispiel, das hoffentlich etwas Licht in die Sache bringt.

Stellen Sie sich einen blauen Button vor.

Im konventionellen Code steht dafür das Folgende:

<button type="button" class="btw btn-primary">

Im klassischen Ansatz wäre hier im HTML-Code lediglich festgelegt, dass es sich dabei um einen Button handelt (type=“button“) und wo die Informationen zum Styling des Buttons (class=“btn-primary“) gefunden werden kann. Der HTML-Code würde allerdings keine Informationen dazu enthalten, welche Farbe dieser zum Beispiel haben sollte. Informationen zum Styling sind in den CSS-Klassen btn und btn-primary enthalten. Hier werden CSS-Eigenschaften wie Farbe, Hintergrundfarbe, Rahmen usw. festgelegt.

Was passiert nun, wenn der nächste Button pink sein soll?

Eine Änderung, wenn auch klein, bedeutet für den HTML-Code, dass type= zwar gleich bleibt, dass sich class= allerdings ändern muss. Dabei braucht es vollkommen eigenständige CSS-Klassen für diesen pinken Button. Selbst bei kleinen Abweichungen müssen Änderungen somit in zwei Bereichen, dem HTML-Code und dem CSS-File vorgenommen werden, dies bedeutet einen relativ hohen Aufwand.

Wie sieht das im Vergleich bei Utility-First aus?

Wir beginnen das Spiel von vorne.

Stellen Sie sich einen Button vor. Dieser Button ist blau.

Im Code steht dabei das Folgende:

<button type=“button“ class=“rounded bg-sky-300 hover: bg-sky-900 py-2 px-4 text-white”> Tailwind </button>

Farbe, Abstände, Schriftfarbe und Co. werden somit gleich im Code mittransportiert. Durch die CSS-Klassen lassen sich dabei zum Beispiel einzelne Eigenschaften eines Elements wie zum Beispiel die CSS-Attribute color und background-color oder auch text-align steuern.

Der Vorteil liegt auf der Hand, soll der nächste Button pink sein, wird lediglich bg-pink-700 anstelle von bg-sky-300 eingefügt und schon ist die Änderung vollzogen. Alles andere bleibt beim Alten.

Im Code steht dabei das Folgende:

<button type=“button“ class=“rounded bg-sky-300 hover: bg-sky-900 py-2 px-4 text-white”> Tailwind </button>

Was sind die Vorteile von Tailwind

• Anpassungsfähig – Mithilfe von Tailwind kann eine Seite so zusammengesetzt werden, wie dies der Wunsch der Betreiber:innen ist. Dabei kann die Standardkonfiguration einfach mit einer tailwind.config.js Datei überschrieben werden.
• Umfassende Designmöglichkeiten – Tailwind ist nicht nur umfassend, was den Einsatz unterschiedlicher Komponenten betrifft, sondern bietet auch zahlreiche Optionen, was die Designmöglichkeiten angeht. Vordefinierte Klassen und die Verwendung von CSS Media Queries eignen sich sowohl für die Gestaltung von Desktop als auch mobilen Designs. Zudem helfen die vordefinierten Klassen bei der Komprimierung des CSS. Das Aussehen der Elemente kann dabei frei gewählt werden und auch leichte Abweichungen von Elementen innerhalb der Seite sind kein Problem. So hat die Kreativität freien Lauf.
• Eigene CSS-Klassen – Denkt man über dieses System nach, stößt man vermutlich schon früh auf die Frage: Bringt dieses System nicht sehr viele Duplikate im HTML? Immerhin gibt es Elemente, die Seitenübergreifend vermutlich immer gleich bleiben (z. B. Buttons). Auch hierfür gibt es in Tailwind eine Lösung. Anwender:innen haben die Möglichkeit, eigene CSS-Klassen zu erstellen. Dies ist besonders dann hilfreich, wenn es nicht nur um ein oder zwei Klassen geht. So können Styles einfach auf viele Elemente übertragen werden.
• Schnelle Entwicklung – Einfache und unkomplizierte Anpassungs- und Designmöglichkeiten bedeuten, dass Zeit gespart werden kann bei der Erstellung einer Seite mit Tailwind. So können auch die Kosten reduziert werden.
• Hohe Stabilität – Das Tailwind-Framework zeichnet sich als sehr stabil aus und hat verhältnismäßig wenige Bugs.

Was sind die Nachteile von Tailwind?

Wie überall gibt es auch beim Utility-First-Framework Tailwind Schattenseiten. So setzt das Framework zum Beispiel Vorkenntnisse in den Bereichen HTML und CSS voraus. Ohne diese stoßen Anwender:innen relativ schnell an ihre Grenzen.

Der Applikationscode von Tailwind wirkt auf den ersten Blick unelegant und überladen. Grund dafür ist, dass jedes Element über sehr viele Klassen verfügt, die spezifische Designaspekte eines Elements regeln.

Außerdem müssen Anwender:innen sozusagen auf einem weißen Blatt Papier beginnen. Wird Tailwind installiert, werden alle CSS-Stile entfernt. Dies betrifft auch Komponenten wie Header, Buttons und die Navigation.

Tailwind in Shopify

Die Wahl des richtigen Themes in Shopify ist eine wichtige. Ein Theme zu finden, dass alle Anforderungen erfüllt, ist hier eine Seltenheit. Dabei müssen Shopbetreiber:innen unweigerlich Tradeoffs in Kauf nehmen. Entweder sind die Kosten niedrig, aber Betreiber:innen können die eigene Vision vom Onlineshop nicht verwirklichen oder die Kosten sind hoch und das Theme enthält eine Vielzahl der Anforderungen. Auch die Option, ein vollkommen eigenes Theme entwickeln zu lassen, dass alle Anforderungen erfüllt, besteht. Diese Strategie ist allerdings mit noch höheren Kosten verbunden.

Quick Starter Pro setzt genau hier an. Dabei handelt es sich um ein Shopify Theme, welches das Tailwind-System einsetzt. Das Theme bietet breite Individualisierungsmöglichkeiten und auch Änderungen, die über das ursprünglich Geplante hinausgehen, sind nicht mit horrenden Kosten verbunden.

Quick Starter Pro hat Ihr Interesse geweckt? Schreiben Sie uns eine Nachricht und wir erzählen Ihnen mehr über das Theme.