Fonts & Colors

Typography in Tailwind

Tailwind provides a comprehensive set of typography utilities that cover font size, weight, style, line height, letter spacing, and text alignment. Let us explore each one.

Font Size

Tailwind offers a scale of font sizes from text-xs to text-9xl:

<p class="text-xs">Extra small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem) — default size</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra large (1.25rem)</p>
<p class="text-2xl">2XL (1.5rem)</p>
<p class="text-3xl">3XL (1.875rem)</p>
<p class="text-4xl">4XL (2.25rem)</p>
<p class="text-5xl">5XL (3rem)</p>
<p class="text-6xl">6XL (3.75rem)</p>
<p class="text-7xl">7XL (4.5rem)</p>
<p class="text-8xl">8XL (6rem)</p>
<p class="text-9xl">9XL (8rem)</p>

Font Weight

Control how bold text appears with weight utilities:

<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>
<p class="font-black">Black (900)</p>

Font Family

Tailwind includes three generic font family utilities:

<p class="font-sans">Sans-serif font stack</p>
<p class="font-serif">Serif font stack</p>
<p class="font-mono">Monospace font stack</p>

Line Height

Use leading-* utilities to control line height:

<p class="leading-none">Line height: 1</p>
<p class="leading-tight">Line height: 1.25</p>
<p class="leading-snug">Line height: 1.375</p>
<p class="leading-normal">Line height: 1.5</p>
<p class="leading-relaxed">Line height: 1.625</p>
<p class="leading-loose">Line height: 2</p>

Letter Spacing

<p class="tracking-tighter">Tighter spacing (-0.05em)</p>
<p class="tracking-tight">Tight spacing (-0.025em)</p>
<p class="tracking-normal">Normal spacing (0)</p>
<p class="tracking-wide">Wide spacing (0.025em)</p>
<p class="tracking-wider">Wider spacing (0.05em)</p>
<p class="tracking-widest">Widest spacing (0.1em)</p>

Text Alignment & Decoration

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-justify">Justified text</p>

<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<p class="uppercase">uppercase text</p>
<p class="capitalize">capitalized text</p>
<p class="italic">Italic text</p>

The Tailwind Color System

Tailwind ships with a carefully curated color palette. Each color has 11 shades ranging from 50 (lightest) to 950 (darkest).

Available Colors

The default palette includes: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose.

Using Colors

Colors are applied with a prefix that describes the CSS property:

<!-- Text color -->
<p class="text-red-500">Red text</p>
<p class="text-blue-700">Dark blue text</p>

<!-- Background color -->
<div class="bg-green-100">Light green background</div>
<div class="bg-purple-600">Purple background</div>

<!-- Border color -->
<div class="border border-gray-300">Gray bordered box</div>

<!-- Ring (outline) color -->
<input class="ring-2 ring-indigo-500" />

Understanding the Shade Scale

Practical Example — Profile Card

<div class="max-w-sm bg-white rounded-xl shadow-md p-6">
  <h3 class="text-xl font-bold text-gray-900">Jane Doe</h3>
  <p class="text-sm text-indigo-600 font-medium">Frontend Developer</p>
  <p class="mt-3 text-gray-600 leading-relaxed">
    Building beautiful interfaces one utility class at a time. 
    Passionate about design systems and accessibility.
  </p>
  <div class="mt-4 flex space-x-2">
    <span class="bg-indigo-100 text-indigo-800 text-xs font-semibold px-3 py-1 rounded-full">CSS</span>
    <span class="bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">React</span>
    <span class="bg-amber-100 text-amber-800 text-xs font-semibold px-3 py-1 rounded-full">JS</span>
  </div>
</div>

This example shows how fonts and colors work together. The heading uses text-xl font-bold text-gray-900 for prominence, while the subtitle uses text-sm text-indigo-600 font-medium for contrast. The badges combine background and text color shades for a harmonious look.

Opacity Modifiers

You can apply opacity to any color using the slash syntax:

<div class="bg-blue-500/75">75% opacity blue background</div>
<p class="text-red-600/50">50% opacity red text</p>
<div class="bg-black/25">25% opacity black overlay</div>

Recap

• Tailwind's typography utilities cover size (text-*), weight (font-*), line height (leading-*), and spacing (tracking-*).
• The color palette has 22 colors, each with 11 shade levels (50–950).
• Colors work with prefixes: text-, bg-, border-, ring-.
• Use the /opacity syntax for transparent colors.

Next up: we will learn about margin, padding, and border utilities.