Tailwind CSS Typography

Typography is the foundation of any design, greatly influencing content readability and user experience. Tailwind provides a rich set of typography utility classes, allowing you to precisely control every aspect of text.

Font Family

Use font-{family} to set the font.

• font-sans: Apply UI sans-serif font family.
• font-serif: Apply UI serif font family.
• font-mono: Apply UI monospace font family.

You can easily add custom fonts in tailwind.config.js under theme.extend.fontFamily.

Font Size

Use text-{size} to control font size. Tailwind provides a harmonious font size scale from text-xs (extra small) to text-9xl (extra extra large).

• text-sm: 0.875rem
• text-base: 1rem (default)
• text-lg: 1.125rem
• text-2xl: 1.5rem
• text-5xl: 3rem

Font Weight

Use font-{weight} to control the font thickness.

• font-thin: 100
• font-light: 300
• font-normal: 400 (default)
• font-medium: 500
• font-semibold: 600
• font-bold: 700
• font-black: 900

Text Color

Use text-{color} to set text color. You can use any color from the color palette.

• text-black, text-white
• text-slate-500
• text-sky-600
• text-transparent

Text Alignment

Use text-{alignment} to control the horizontal alignment of text.

• text-left: Left alignment
• text-center: Center alignment
• text-right: Right alignment
• text-justify: Justified alignment

Line Height

Use leading-{height} to control line height and improve text readability.

• leading-none: 1
• leading-tight: 1.25
• leading-normal: 1.5 (default)
• leading-loose: 2

Letter Spacing

Use tracking-{spacing} to control the spacing between characters.

• tracking-tighter: -0.05em
• tracking-normal: 0em (default)
• tracking-wider: 0.05em

Text Decoration

• underline: Add underline.
• overline: Add overline.
• line-through: Add strikethrough.
• no-underline: Remove text decoration.

You can also combine decoration-{style} and decoration-{color} to set the style and color of the decoration line.

<p class="text-lg font-semibold text-slate-800 leading-relaxed">
  This is a well-typed piece of text that uses appropriate font size, weight, and line height to ensure optimal readability.
</p>

<a href="#" class="underline decoration-sky-500 decoration-2 hover:decoration-blue-400">
  A styled link
</a>

By combining these typography tools, you can create rich, clear, and expressive text content.