Tailwind CSS Typography

• Sizing
• Backgrounds

Tailwind CSS provides an extensive set of typography utilities for controlling everything from font-size and color to line-height and letter-spacing.

Tailwind's typography system is highly consistent, ensuring that text elements across your application maintain a professional and readable rhythm. Because typography encompasses so many CSS properties, it's not practical to list every single utility class. Instead, this page outlines the core concepts and provides examples of the most common text-related utilities to show you how they work together.

Font Family

Out of the box, Tailwind provides three default font families: a sans-serif stack (font-sans), a serif stack (font-serif), and a monospaced stack (font-mono). You can easily customize these defaults or add your own web fonts (like Google Fonts) in your project's configuration.

Font Size

You can use text-{size} to control the font size. Tailwind provides a comprehensive scale ranging from very small captions (text-xs) to massive hero headlines (text-9xl). The table below showcases some of the most commonly used sizes to give you an idea of the scale:

Font Weight & Style

You can control the heaviness of your text using font weight utilities. Tailwind maps these utilities to the standard numeric weights (100 through 900) supported by most modern variable fonts.

You can also use italic and not-italic to control the font style.

Text Alignment & Wrapping

Managing how text flows within its container is important for readability:

• Alignment: Use text-left, text-center, text-right, or text-justify to control the text alignment.
• Wrapping: Tailwind provides utilities like text-wrap, text-nowrap, text-balance, and text-pretty to manage how lines break. text-balance is particularly useful for preventing awkward single-word orphans on headings.
• Overflow: Use truncate to crop overflowing text with an ellipsis (…), or line-clamp-{lines} to truncate multi-line text blocks.

Color & Decoration

Visual style is also important when it comes to typography:

• Text Color: You can apply any color from your theme using text-{color}. For example text-blue-600, where 600 represents the color intensity or shade level within the default blue color palette. The shade value can range from 50 (lightest) to 950 (darkest). The default stops are 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 (which means you'll need to use one of those values when specifying the shade). You can also adjust opacity easily by adding a forward slash and a percentage value, such as text-blue-600/50. The percentage value can be any value between 0 and 100 where 0 is fully transparent and 100 is fully opaque.
• Decoration: You can use underline, line-through, or no-underline for text decoration. You can get even more granular by changing the underline's style (decoration-dashed), thickness (decoration-2), color (decoration-red-500), or offset from the text (underline-offset-4).
• Case: And you can quickly change the text case with uppercase, lowercase, capitalize, or normal-case.

Leading & Tracking

You can control the line-height (leading) and letter-spacing (tracking) to fine-tune readability.

Leading (Line Height)

Modern Tailwind prefers the combined shorthand or the numeric scale. While some aliases like leading-tight, leading-snug, leading-normal, leading-relaxed and leading-loose exist, they're considered deprecated in favour of using numbers offers better precision within your design grid.

Tracking (Letter Spacing)

Tracking is defined using em units so that it scales automatically with the font size. You can use the standard scale or map directly to your CSS variables.

Example

Here is an example demonstrating how several of these typography utilities can be combined:

In the next page, we'll explore how Tailwind CSS handles backgrounds and gradients.

• Sizing
• Backgrounds