| Nächste Überarbeitung | Vorhergehende Überarbeitung |
| modul:ffit:tailwind:grundlagen [2024/11/21 06:41] – angelegt kdemirci | modul:ffit:tailwind:grundlagen [2024/11/21 06:48] (aktuell) – kdemirci |
|---|
| 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. | 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. |
| |
| ===== Utility-First-Ansatz ===== | ===== Was macht Tailwind besonders? ===== |
| | |
| | ==== Utility-First-Ansatz ==== |
| 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. | 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. |
| |
| * hover:bg-blue-700 ändert die Hintergrundfarbe, wenn der Button mit der Maus überfahren wird. | * 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. | ==== Keine vordefinierten Komponenten ==== |
| | Tailwind liefert keine fertigen Design-Komponenten wie Buttons oder Karten. Stattdessen erlaubt es Entwicklern, alle Designentscheidungen selbst zu treffen. Dies bedeutet maximale Flexibilität und völlige Freiheit beim Styling. |
| | |
| | ==== Konsistenz und Wiederverwendbarkeit ==== |
| | Durch die Nutzung von Utility-Klassen wird eine konsistente Designsprache über das gesamte Projekt hinweg sichergestellt. Alle Entwickler im Team verwenden dieselben Klassen, was die Lesbarkeit und Wartbarkeit des Codes verbessert. |
| | |
| | ===== Nachteil gegenüber komponentbasierte Frameworks wie Bootstrap ===== |
| | |
| | Tailwind ist ein super Werkzeug, es gibt jedoch auch Nachteile, die wir beachten müssen. Da wir mit Tailwind grundsätzlich "CSS in HTML schreiben", werden unsere HTML-Dokumente sehr unübersichtlich. So kann eine einfache Landing-Page wie folgt aussehen: |
| | |
| | <code html> |
| | <div class="bg-gray-100 min-h-screen flex items-center justify-center"> |
| | <div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full"> |
| | <h1 class="text-2xl font-bold mb-4 text-center">Willkommen!</h1> |
| | <p class="text-gray-600 mb-6 text-center"> |
| | Dies ist ein Beispiel für eine einfache Landingpage mit Tailwind CSS. |
| | </p> |
| | <button class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"> |
| | Mehr erfahren |
| | </button> |
| | </div> |
| | </div> |
| | </code> |
| | |
| | Dieses Problem wird jedoch gelöst, sobald wir mit Komponenten arbeiten. Diese werden wir zum späteren Zeitpunkt in React anschauen. ;-) |