Typography

Tailwind · Reference cheat sheet

📋 Overview

Typography utilities control font family, size, weight, line-height, letter-spacing, alignment, and text decoration.

🔧 Core concepts

💡 Examples

Heading + body:

<h1 class="text-3xl font-bold tracking-tight text-zinc-900">Title</h1>
<p class="mt-2 text-base leading-7 text-zinc-600">Supporting paragraph.</p>

Truncate:

<p class="max-w-xs truncate">A very long single-line label that will ellipsis</p>

Clamp lines:

<p class="line-clamp-3">Multi-line preview text…</p>

⚠️ Pitfalls

• Default text-* sizes include line-height — overriding only size can look uneven.
• System font stacks may not match brand — extend theme.fontFamily.
• truncate requires overflow hidden + width constraint to take effect.

🔗 Related

• colors.md
• plugins.md
• spacing_sizing.md
• custom_config.md