Tailwind CSS Tutorial · Tailwind Basics · Lesson 5 of 27
Typography
Font size, weight and family, line height, letter spacing, text colour and alignment, truncating text, and balanced headings.
Font size and weight
text-xs, text-sm, text-base (16px), text-lg, text-xl, text-2xl … text-9xl. Each size comes with a
sensible line height. Weights go from font-thin (100) to font-black (900).
<div class="space-y-1 p-6">
<p class="text-sm text-gray-500">text-sm, gray-500</p>
<p class="text-base">text-base (the default size)</p>
<p class="text-xl font-semibold">text-xl font-semibold</p>
<p class="text-3xl font-bold tracking-tight text-gray-900">text-3xl font-bold tracking-tight</p>
<p class="font-serif text-lg italic">font-serif italic</p>
<p class="font-mono text-sm uppercase tracking-widest text-sky-600">font-mono uppercase</p>
</div>
Line height, spacing and alignment
| Utility | Effect |
|---|---|
leading-tight, leading-relaxed, leading-7 |
line height |
tracking-tight, tracking-wide |
letter spacing |
text-left, text-center, text-right, text-justify |
alignment |
uppercase, lowercase, capitalize |
text case |
underline, line-through, decoration-2, underline-offset-4 |
decoration |
font-sans, font-serif, font-mono |
font family |
text-size/line-height, e.g. text-lg/7 |
size and line height together |
Long text
<div class="max-w-md space-y-4 p-6">
<h2 class="text-2xl font-bold text-balance">A heading that wraps nicely across two lines thanks to balance</h2>
<p class="truncate rounded bg-gray-100 p-2">truncate: this sentence is far too long to fit, so it ends with an ellipsis instead of wrapping</p>
<p class="line-clamp-2 leading-relaxed text-gray-600">line-clamp-2: Tailwind lets you limit text to a number of lines. Anything longer is cut off with an ellipsis at the end of the second line, which is perfect for card descriptions and previews in lists.</p>
</div>
text-balance evens out the lines of a heading; text-pretty avoids a single word on the last line of a
paragraph.
Test yourself
Which class limits a paragraph to three lines with an ellipsis?
line-clamp-3truncate-3max-lines-3text-3
Show answer
Answer: line-clamp-3
line-clamp-N clamps to N lines; truncate always uses one line.