Klassennamen lesen

Du kennst jetzt einige Tailwind-Klassen. Sieh sie dir neben dem CSS an, das sie erzeugen:

Die Namen sind nicht zufällig. Ein Klassenname sagt, was die Klasse tut, und besteht meist aus CSS, das du kennst:

• Manche Klassennamen sind einfach der CSS-Wert, weil klar ist, zu welcher Eigenschaft er gehört: uppercase kann nur text-transform sein. Genauso ist italic font-style: italic und underline text-decoration-line: underline.
• Andere Klassen beginnen mit einem kurzen Wort für die Eigenschaft, gefolgt vom Wert: text-center (Textausrichtung), font-bold (Schriftstärke), list-disc (die Art der Aufzählungspunkte).

Das kurze Wort ist allerdings nicht immer der Name der Eigenschaft. Klassen, die mit text- beginnen, setzen die Ausrichtung von Text und seine Größe (text-3xl), und in der nächsten Lektion verwendest du text- auch für die Textfarbe. Wenn du dir nicht sicher bist, schlag die Klasse also nach. Die Dokumentation von Tailwind unter tailwindcss.com/docs hat für jede CSS-Eigenschaft eine Seite mit einer Tabelle ihrer Klassen und dem CSS, das jede davon erzeugt. Am schnellsten findest du eine Seite über die Suche oben: Gib eine CSS-Eigenschaft ein, die du kennst, zum Beispiel font-style. Die Dokumentation beschreibt Tailwind 4, die Version, die dieser Kurs verwendet. Manche Tutorials im Internet handeln noch von der älteren Version Tailwind 3, in der einige Klassen anders heißen.

Die neue Klasse underline verdient ein paar Worte. Linien unter oder durch Text setzt die CSS-Eigenschaft text-decoration-line: Der Wert underline zeichnet eine Linie unter den Text, line-through durch ihn hindurch, und none entfernt die Linie. Browser unterstreichen Links, aber Preflight hat die Unterstreichung samt der blauen Farbe entfernt (color: inherit und text-decoration: inherit), unser Link sieht also wie normaler Text aus. Das ist ein Problem: Besucher erkennen nicht, dass sie ihn anklicken können. Eine Unterstreichung ist das deutlichste Zeichen für einen Link.