Kursinhalt
Tailwind CSS für Webentwicklung
Tailwind CSS für Webentwicklung
Typografie-Dienstprogramme
Tailwind CSS bietet eine robuste Sammlung von Utilities zur Verwaltung der Typografie, mit denen Sie Schriftgrößen, Schriftgewichte und Zeilenhöhen einfach steuern können. Diese Utilities helfen sicherzustellen, dass Ihr Text konsistent gestylt und auf verschiedenen Geräten und Bildschirmgrößen leicht lesbar ist.
Schriftgröße
Die Schriftgrößen-Utilities in Tailwind CSS ermöglichen es Ihnen, die Größe Ihres Textes anzupassen. Diese Utilities folgen einer Namenskonvention, die es einfach macht, verschiedene Größen zu verstehen und anzuwenden.
| Schriftgröße | Beschreibung |
|---|---|
text-xs | Sehr kleiner Text. |
text-sm | Kleiner Text. |
text-base | Standardtext (Standardgröße). |
text-lg | Großer Text. |
text-xl | Sehr großer Text. |
text-2xl, text-3xl, text-4xl, text-5xl, text-6xl | Zunehmend größere Textgrößen. |
index.html
Schriftstärke
Schriftstärke-Dienstprogramme steuern die Dicke oder Fettheit des Textes. Tailwind CSS bietet mehrere Dienstprogramme, um eine breite Palette von Schriftstärken abzudecken, von dünn bis schwarz.
| Schriftstärke | Beschreibung |
|---|---|
font-thin | Dünne Schriftstärke. |
font-light | Leichte Schriftstärke. |
font-normal | Normale Schriftstärke. |
font-medium | Mittlere Schriftstärke. |
font-semibold | Halbfette Schriftstärke. |
font-bold | Fette Schriftstärke. |
font-extrabold | Extra fette Schriftstärke. |
font-black | Schwarze Schriftstärke. |
index.html
Zeilenhöhe
Zeilenhöhe-Dienstprogramme steuern den vertikalen Abstand zwischen Textzeilen. Eine angemessene Zeilenhöhe kann die Lesbarkeit und das gesamte visuelle Erscheinungsbild von Textblöcken verbessern.
| Zeilenhöhe | Beschreibung |
|---|---|
leading-none | Keine Zeilenhöhe. |
leading-tight | Enge Zeilenhöhe. |
leading-snug | Kuschelige Zeilenhöhe. |
leading-normal | Normale Zeilenhöhe. |
leading-relaxed | Entspannte Zeilenhöhe. |
leading-loose | Lockere Zeilenhöhe. |
leading-3, leading-4, leading-5, etc. | Spezifische numerische Zeilenhöhe. |
index.html
Hinweis
Wenn Sie spezifische Informationen über Schriftgröße, Schriftgewicht oder Zeilenhöhe benötigen, klicken Sie bitte auf die folgenden Links:
1. Welche Klasse würden Sie verwenden, um die Schriftgröße auf extra groß zu setzen?
2. Welche Utility-Klasse würden Sie verwenden, um Text fett zu machen?
3. Welche Klasse setzt den Zeilenabstand auf entspannt?
Danke für Ihr Feedback!
