Styling

Typography and Colors

Use Tailwind's typography utilities and color palette to create beautiful, consistent designs.

Typography

Key text utilities:

  • Size: text-xs through text-9xl
  • Weight: font-thin through font-black
  • Family: font-sans, font-serif, font-mono
  • Style: italic, not-italic
  • Decoration: underline, line-through, no-underline
  • Transform: uppercase, lowercase, capitalize

Color Palette

Tailwind includes a comprehensive color palette with shades 50-950:

  • slate, gray, zinc, neutral, stone
  • red, orange, amber, yellow
  • lime, green, emerald, teal
  • cyan, sky, blue, indigo, violet
  • purple, fuchsia, pink, rose

Apply to: text-{color}, bg-{color}, border-{color}

Example

html
<!-- Typography scale -->
<p class="text-xs">Extra small text</p>
<p class="text-sm">Small text</p>
<p class="text-base">Base size (16px)</p>
<p class="text-lg">Large text</p>
<p class="text-xl">Extra large</p>
<h1 class="text-4xl font-bold">Heading</h1>
<h2 class="text-2xl font-semibold text-gray-700">Subheading</h2>

<!-- Font weights -->
<p class="font-light">Light weight</p>
<p class="font-normal">Normal weight</p>
<p class="font-medium">Medium weight</p>
<p class="font-semibold">Semibold weight</p>
<p class="font-bold">Bold weight</p>
<p class="font-extrabold">Extra bold</p>

<!-- Line height and letter spacing -->
<p class="leading-tight">Tight line height</p>
<p class="leading-relaxed tracking-wide">Relaxed and wide</p>

<!-- Color examples -->
<div class="space-y-2">
  <p class="text-red-500">Error message</p>
  <p class="text-green-600">Success message</p>
  <p class="text-yellow-500">Warning message</p>
  <p class="text-blue-600">Info message</p>
  <p class="text-gray-500">Muted text</p>
</div>

<!-- Background colors -->
<div class="bg-blue-50 text-blue-900 p-3 rounded">Info box</div>
<div class="bg-green-50 text-green-800 p-3 rounded">Success box</div>
<div class="bg-red-50 text-red-700 p-3 rounded">Error box</div>
Try it yourself — HTML