Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:tailwind:prinzipien [2024/11/21 06:52] – kdemirci
+++ modul:ffit:tailwind:prinzipien [2024/11/21 06:57] (aktuell) – kdemirci
@@ Zeile 3: / Zeile 3: @@
 Jede Tailwind-Klasse hat ein einheitliches Muster:
-<Eigenschaft>-<Wert>
+<color #22b14c><Eigenschaft></color>-<color #00a2e8><Wert></color>
--> Eigenschaft: Steht für die CSS-Eigenschaft, die die Klasse kontrolliert (z. B. bg für background-color, text für color).
+-> <color #22b14c>Eigenschaft:</color> Steht für die CSS-Eigenschaft, die die Klasse kontrolliert (z. B. bg für background-color, text für color).
--> Wert: Gibt die Einstellung für diese Eigenschaft an, wie z. B. eine Farbe (red-500), einen Abstand (4), oder eine Grösse (lg).
+-> <color #00a2e8>Wert:</color> Gibt die Einstellung für diese Eigenschaft an, wie z. B. eine Farbe (red-500), einen Abstand (4), oder eine Grösse (lg).
 Beispiel:
-<code>
+<code html>
 <div class="text-center text-blue-500 bg-gray-200 p-4">
   Hallo Welt!
 </div>
 </code>
+===== Wichtigsten Klassen =====
+==== Farben =====
+Die Farben sind in Tailwind systematisch benannt und in Helligkeitsstufen unterteilt, von 50 (sehr hell) bis 900 (sehr dunkel).
+----
+Textfarben: text-{Farbe}-{Stufe}
+Beispiel: text-red-500, text-gray-700
+----
+Hintergrundfarben: bg-{Farbe}-{Stufe}
+Beispiel: bg-blue-300, bg-green-600
+----
+Rahmenfarben: border-{Farbe}-{Stufe}
+Beispiel: border-yellow-400, border-black
+==== Abstände (Spacing) ====
+Tailwind verwendet ein einheitliches Abstandssystem für Margin, Padding und ähnliche Eigenschaften. Die Werte reichen von 0 bis 96, wobei jede Zahl eine relative Einheit darstellt (z. B. 4 entspricht 1rem).
+----
+Padding: p-{Wert}, px-{Wert} (horizontal), py-{Wert} (vertikal)
+Beispiel: p-4, px-2, py-6
+----
+Margin: m-{Wert}, mx-{Wert}, my-{Wert}
+Beispiel: m-8, mx-auto (zentriert)