Jede Tailwind-Klasse hat ein einheitliches Muster:
<Eigenschaft>-<Wert>
→ Eigenschaft: 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).
Beispiel:
<div class="text-center text-blue-500 bg-gray-200 p-4"> Hallo Welt! </div>
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
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)