LU01a - Grundlagen

Tailwind CSS ist ein modernes und hochflexibles CSS-Framework, das es Entwicklern ermöglicht, schnell und effizient ansprechende Benutzeroberflächen zu gestalten. Im Gegensatz zu traditionellen Frameworks wie Bootstrap, die vorgefertigte Komponenten und Designs bereitstellen, ist Tailwind ein Utility-First Framework. Das bedeutet, dass es sich auf kleine, atomare Klassen konzentriert, mit denen spezifische Styling-Aufgaben direkt im HTML gelöst werden können. Diese Klassen können beliebig kombiniert werden, um vollständig individualisierte Designs zu erstellen.

Im Mittelpunkt von Tailwind steht der Utility-First-Ansatz. Statt wie in traditionellen CSS-Stilen Klassen für spezifische Komponenten zu erstellen (z.B. .button oder .card), bietet Tailwind eine Vielzahl von vordefinierten Klassen, die direkt auf einzelne Eigenschaften wie Farbe, Grösse, Abstand oder Positionierung abzielen. Dadurch wird der Entwicklungsprozess beschleunigt, da sich Entwickler auf das Erstellen der Benutzeroberfläche konzentrieren können, ohne ständig in CSS-Dateien wechseln zu müssen.

Ein Beispiel könnte so aussehen:

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
    Klick mich!
</button>

In diesem Beispiel definiert jede Klasse eine bestimmte Eigenschaft:

• bg-blue-500 legt den Hintergrund auf eine blaue Farbe fest.
• text-white sorgt dafür, dass der Text weiss ist.
• py-2 und px-4 setzen vertikale und horizontale Innenabstände.
• rounded fügt abgerundete Ecken hinzu.
• hover:bg-blue-700 ändert die Hintergrundfarbe, wenn der Button mit der Maus überfahren wird.

Diese Utility-First-Klassen ermöglichen es uns, verschiedene CSS-Anweisungen direkt in HTML zu verwenden, ohne immer wieder in unser CSS wechseln zu müssen. Das hat Vor- und Nachteile. Bei einer Bibliothek wie Bootstrap gibt es bereits komplett vordefinierte Komponenten, die wir verwenden können, bei Tailwind müssen wir diese selbst schreiben. Das kann dazu führen, dass bei Plain HTML die Komponenten nicht immer gleich aussehen.