Tailwind - Wie wir das CSS-Framework einsetzen

Was ist Tailwind CSS?

Als Software-Dienstleister sind wir immer motiviert, die neuesten Tools zu verfolgen und effizienter zu arbeiten. Seit geraumer Zeit entwickeln wir Websites, Apps und Software-Anwendungen mit dem CSS Framework Tailwind CSS. Tailwind ist ein Utility-First CSS-Framework, das vorgefertigte Klassen bietet, um Websites direkt in den HTML-Templates zu gestalten. In diesem Artikel werden wir uns mit den Grundlagen von Tailwind CSS beschäftigen, wie es in Projekte integriert werden kann und wie es zur Beschleunigung der Webentwicklung eingesetzt werden kann.

Was bedeutet „Utility First“?

Im Kontext von CSS-Frameworks stellt der „Utility-First“-Ansatz eine deutliche Abkehr von der traditionellen Methode der CSS-Kaskadierung dar. Tailwind CSS, als ein prominenter Vertreter dieses Ansatzes, basiert auf dem Prinzip, dass statt der Erstellung komplexer, spezifischer CSS-Selektoren und Regel-Sets, Entwickler auf eine umfangreiche Bibliothek von Utility-Klassen zurückgreifen, die einzelne Stile oder Funktionen repräsentieren.

Das Utility-First-Prinzip von Tailwind CSS bedeutet konkret, dass alle Klassen „flach“ und gleich gewichtet sind. Anstatt CSS in einer tief verschachtelten Struktur zu schreiben, bei der die Selektoren zunehmend komplexer werden, bietet Tailwind eine flache Architektur. Jede Klasse führt eine einzige spezifische Aufgabe aus. Dadurch wird das häufig auftretende Problem der Spezifizität reduziert, das insbesondere bei großen und komplexen Stylesheets zu Schwierigkeiten führen kann.

Beispielsweise kann in traditionellem CSS eine tiefe Verschachtelung von Selektoren dazu führen, dass Stile unerwartet überschrieben werden, was die Fehlersuche und Wartung erschwert. Mit Tailwind wird dieses Problem durch die Nutzung isolierter, wiederverwendbarer Utility-Klassen vermieden. Diese Klassen können kombiniert werden, um das gewünschte Erscheinungsbild zu erzielen, ohne sich Gedanken über Konflikte oder die Überschreibung von Stilen machen zu müssen.

Durch diesen Ansatz bietet Tailwind eine intuitive, wartbare und skalierbare Methode für die Gestaltung von Webseiten. Entwickler können schnell visuelle Änderungen vornehmen, indem sie einfach die entsprechenden Klassen zu ihrem HTML-Code hinzufügen, was zu einer effizienteren und klareren Code-Struktur führt.

Darum nutzen wir Tailwind CSS

Keine Klassennamen mehr: Mit Tailwind CSS müssen wir uns keine Gedanken mehr über Klassennamen machen. Die vordefinierten Klassennamen sind intuitiv und beschreiben genau, was sie tun.

Nahtlose Integration: Wir müssen nicht mehr (so oft) zwischen HTML/Template und CSS Dateien hin- und herwechseln.

Konsistenz: Tailwind CSS bietet projektübergreifende Konsistenz, unabhängig davon, ob wir React, Vue.js oder Twig verwenden. Jede Person aus unserem Dev-Team kann damit arbeiten.

Einfaches Debugging: Wir können direkt im HTML nachvollziehen, welche Klassen auf ein Element angewendet wurden. Das macht die Fehlerbehebung einfacher.

Utility First: Alle Klassen sind flach und gleich gewichtet.

Exemplarischer Tailwind CSS Code zum Stylen eines HTML-Buttons

Zur Veranschaulichung der bereits erklärten Verwendung der Utility-Klassen soll der folgende Code-Schnipsel dienen. Dieser zeigt, wie man einen simplen Button direkt in einer HTML-Datei mittels Tailwind CSS stylen kann.

<button class="bg-blue-500 font-bold py-2 px-4 hover:bg-blue-700">
    Click me
</button>

<button class="button">
    Click me
</button>

.button {
    background-color: #3490dc;
    font-weight: bold;
    padding: 0.5rem 1rem;
}

.button:hover {
    background-color: #2779bf
}

Denkbar ist an dieser Stelle nun, dass der Button an mehreren Stellen in einem Projekt benötigt wird, weswegen auch in Tailwind an manchen Stellen die Implementierung eigener Klassen sinnvoll ist. Die Beispielklasse my-button könnte in einer CSS-Datei ebenfalls mit Tailwind CSS Utility-Klassen gestylt werden, was einen guten Kompromiss zwischen semantischen HTML und der Nutzung von Tailwind CSS generierten Styles darstellt. Diese Implementierung ist dem folgenden Beispiel zu entnehmen (siehe dafür weiterhin Tailwind CSS Layers).

@layer components {
    .my-button {
       @apply bg-blue-500 font-bold py-2 px-4;
    }

    .my-button:hover {
       @apply bg-blue-700;
    }
}

Installation und Konfiguration von Tailwind CSS

Die Installation von Tailwind ist ein geradliniger Prozess, der durch eine umfassende Dokumentation und Community-Unterstützung erleichtert wird. Nach der Installation rückt die Konfigurationsdatei tailwind.config.js in den Fokus. Diese Konfigurationsdatei ist das Herzstück von Tailwind und ermöglicht eine tiefgreifende Anpassung des Frameworks an spezifische Projektanforderungen.

Die „offizielle“ Basis-Konfigurationsdatei, die unter tailwind.config.js zu finden ist, dient als Ausgangspunkt. Diese Datei enthält eine Vielzahl von Attribut-Paaren, die die Grundlage der Tailwind-Styling-Optionen bilden. Von Farben und Schriftgrößen bis hin zu Breakpoints und Variants – alle sind hier definiert.

Überschreiben von Standardeinstellungen

Ein wesentlicher Aspekt der Tailwind-Konfiguration ist die Möglichkeit, Standardwerte zu überschreiben. Nehmen wir zum Beispiel das Attribut colors. In der Basis-Konfigurationsdatei sind eine Reihe von Standardfarben definiert. Diese können jedoch leicht durch eigene Farbwerte ersetzt werden, um das Design an die Markenidentität eines Projekts anzupassen. Indem man eigene Farbwerte in die Konfigurationsdatei einträgt, überschreibt man die Standardpalette, was eine individuelle und markenspezifische Farbgebung ermöglicht.

Erweiterung der Konfiguration mit eigenen Werten

Neben dem Überschreiben von Standardwerten bietet Tailwind CSS auch die Flexibilität, die Konfigurationsdatei durch das Hinzufügen eigener Schlüssel-Wert-Paare zu erweitern. Dies geschieht über das extends-Attribut. Beispielsweise können Entwickler eigene Utility-Klassen definieren, die spezifische Anforderungen oder wiederkehrende Muster in ihren Projekten adressieren. Durch das Hinzufügen eigener Werte zu Attributen wie spacing, borderRadius oder shadows können Entwickler ihre Tailwind-Installation weiter anpassen und erweitern, was zu einem maßgeschneiderten Design führt.

Nutzung von Tailwind CSS

Tailwind bietet viele leistungsstarke Funktionen für die Gestaltung von Oberflächen:

States: Zustände wie Hover und Focus können ganz einfach definiert und angewendet werden.

Responsivität: Mit der Konfigurationsdatei und den Utility-Klassen können Designs für verschiedene Bildschirmgrößen optimiert werden.

Eigene Werte: Tailwind ermöglicht die Definition eigener Werte für Klassen, um diese noch besser an ein Projekt anzupassen.

Just-in-Time-Modus: Im Gegensatz zur traditionellen Methode, bei der alle möglichen Styles im Voraus generiert werden, erzeugt der JIT-Modus Styles dynamisch bei Bedarf. Dies führt zu optimierten CSS-Dateien und erheblich reduzierten Dateigrößen, oft um über 95 %. Im JIT-Modus werden Templates on demand generiert, anstatt alles im Voraus während der initialen Bauphase zu erstellen.

Plugins: Mithilfe einer Vielzahl von Plugins kann die Funktionalität erweitert werden.

Wie Tailwind CSS bei uns zum Einsatz kommt

Die einfache Umsetzung eines Templates mit Tailwind CSS ermöglicht eine erhebliche Zeitersparnis, da ein Template ohne großen Aufwand direkt in einer Datei erstellt werden kann. Auch die Teamarbeit wird durch den Einsatz von Tailwind CSS agiler gestaltet. Wenn alle Teammitglieder Tailwind verwenden, findet man sich deutlich schneller in Projekten zurecht und der Debugging-Prozess wird vereinfacht.

Bei uns kommt Tailwind CSS in fast allen Projekten zum Einsatz, insbesondere in Projekten, in denen Designs schnell und entwicklerübergreifend umgesetzt werden müssen. Einige Projekte, die mit Tailwind CSS realisiert wurden, sind die Demokratie-Plattform wähl-mal, das Diskussionsforum Depression und die Website für das Inklusionsprojekt „Barrieren Sprengen“, die noch in diesem Jahr online gehen soll.

Sie interessieren sich für eine Website oder App? Wir sind die richtigen Ansprechpartner und beraten Sie gern. Sprechen Sie uns an!

Tailwind - Wie wir das CSS-Framework im Alltag einsetzen