Tailwind CSS Typography
Tailwind has a class for every common text style, from size and weight to spacing and alignment.
Font Size
| Class | Size | Pixels |
|---|---|---|
text-xs | 0.75rem | 12px |
text-sm | 0.875rem | 14px |
text-base | 1rem | 16px |
text-lg | 1.125rem | 18px |
text-xl | 1.25rem | 20px |
text-2xl | 1.5rem | 24px |
text-4xl | 2.25rem | 36px |
text-6xl | 3.75rem | 60px |
The scale goes all the way up to text-9xl. Each size class also sets a matching line height.
Font Weight and Style
| Class | CSS |
|---|---|
font-light | font-weight: 300 |
font-normal | font-weight: 400 |
font-medium | font-weight: 500 |
font-semibold | font-weight: 600 |
font-bold | font-weight: 700 |
italic | font-style: italic |
Example
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<h1 class="text-4xl font-bold text-gray-900">Karachi Food Street</h1>
<p class="text-xl font-medium text-cyan-700 mt-2">Burns Road, open till 2 am</p>
<p class="text-base text-gray-600 mt-4">Try the nihari, the rabri and the famous seekh kebabs.</p>
<p class="text-sm italic text-gray-400 mt-2">Prices change during Ramadan.</p>
</body>
</html>Font Family
Tailwind gives three font stacks:
font-sans: clean fonts like the system UI font (the default)font-serif: fonts with small strokes, such as Georgiafont-mono: same-width letters, good for code
Alignment, Spacing and Line Height
| Class | What it does |
|---|---|
text-left, text-center, text-right, text-justify | Text alignment |
leading-tight, leading-normal, leading-relaxed, leading-loose | Line height |
tracking-tight, tracking-wide, tracking-widest | Letter spacing |
Example
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-8 max-w-xl">
<p class="text-sm uppercase tracking-widest text-cyan-600 font-semibold text-center">New Batch</p>
<h2 class="text-3xl font-bold text-center tracking-tight mt-1">Learn Web Development</h2>
<p class="leading-tight mt-6 bg-gray-100 p-3">leading-tight: The lines of this paragraph sit close together, which is fine for short headings but hard to read in long text.</p>
<p class="leading-relaxed mt-4 bg-gray-100 p-3">leading-relaxed: The lines of this paragraph have more room, so long text is easier on the eyes.</p>
</body>
</html>For long paragraphs, combine leading-relaxed with a maximum width like max-w-prose. Very long lines are tiring to read.
Decoration and Transform
| Class | Effect |
|---|---|
underline | Underlines text |
line-through | Draws a line through text (old prices) |
no-underline | Removes underlines |
uppercase, lowercase, capitalize | Changes letter case |
Cutting Off Long Text
truncate keeps text on one line and adds "..." if it is too long. It is useful for product names in small cards.
Example
html
<p class="truncate w-48">Samsung Galaxy phone with 256 GB storage and a case</p>line-clamp-2 shows two lines and then cuts off the rest with "...".
Exercise
Exercise
Which class makes text bold?