Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:tailwind:grundlagen [2024/11/21 06:43] – kdemirci
+++ modul:ffit:tailwind:grundlagen [2024/11/21 06:48] (aktuell) – kdemirci
@@ Zeile 28: / Zeile 28: @@
 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. ;-)