Typography
Text Alignment and Decoration
Beyond size and color, Tailwind gives you utilities for alignment, decoration, transform, letter spacing and line height.
Alignment and decoration
- Alignment: text-left, text-center, text-right, text-justify.
- Decoration: underline, line-through, no-underline.
- Transform: uppercase, lowercase, capitalize.
- Spacing: tracking-* (letter spacing) and leading-* (line height).
Example
<div class="space-y-2">
<p class="text-center uppercase tracking-widest text-sky-600 font-bold text-sm">Featured</p>
<h2 class="text-center text-2xl font-black">The best interns</h2>
<p class="text-center text-gray-500 line-through">₹999</p>
</div>Line height for readability
Example
<p class="max-w-md leading-relaxed text-gray-700">
Comfortable line height (leading-relaxed) makes long paragraphs much easier to read on wide screens.
</p>