05 - Colors and Typography

Color System

Tailwind includes a comprehensive color palette with shades from 50 (lightest) to 950 (darkest).

Text Colors

<!-- Gray scale -->
<p class="text-gray-50">Lightest gray</p>
<p class="text-gray-500">Medium gray</p>
<p class="text-gray-900">Almost black</p>

<!-- Brand colors -->
<p class="text-blue-600">Blue text</p>
<p class="text-green-500">Green text</p>
<p class="text-red-600">Red text</p>
<p class="text-yellow-500">Yellow text</p>
<p class="text-purple-600">Purple text</p>
<p class="text-pink-500">Pink text</p>

<!-- Basic colors -->
<p class="text-black">Black</p>
<p class="text-white">White</p>

Background Colors

<div class="bg-blue-500">Blue background</div>
<div class="bg-green-100">Light green background</div>
<div class="bg-red-900">Dark red background</div>

<!-- Gradients -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Left to right gradient
</div>

<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
  Complex gradient with via
</div>

<!-- Gradient directions -->
<!-- to-t (top), to-b (bottom), to-l (left), to-r (right) -->
<!-- to-tl, to-tr, to-bl, to-br (diagonals) -->

Border Colors

<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>
<div class="border-t-4 border-red-600">Top border only</div>

Opacity

<!-- Text opacity -->
<p class="text-black opacity-100">Full opacity</p>
<p class="text-black opacity-75">75% opacity</p>
<p class="text-black opacity-50">50% opacity</p>
<p class="text-black opacity-25">25% opacity</p>

<!-- Background opacity -->
<div class="bg-blue-500 bg-opacity-100">Full</div>
<div class="bg-blue-500 bg-opacity-50">Semi-transparent</div>

<!-- Modern approach — color with alpha -->
<div class="bg-blue-500/50">50% opacity</div>
<div class="bg-blue-500/75">75% opacity</div>
<div class="text-gray-900/90">90% opacity text</div>

Typography

<p class="text-xs">Extra small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra large (20px)</p>
<p class="text-2xl">2X large (24px)</p>
<p class="text-3xl">3X large (30px)</p>
<p class="text-4xl">4X large (36px)</p>
<p class="text-5xl">5X large (48px)</p>
<p class="text-6xl">6X large (60px)</p>
<p class="text-7xl">7X large (72px)</p>
<p class="text-8xl">8X large (96px)</p>
<p class="text-9xl">9X large (128px)</p>

Font Weight

<p class="font-thin">Thin (100)</p>
<p class="font-extralight">Extra light (200)</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">Extra bold (800)</p>
<p class="font-black">Black (900)</p>

Font Family

<!-- Sans-serif (default) -->
<p class="font-sans">Sans-serif font</p>

<!-- Serif -->
<p class="font-serif">Serif font</p>

<!-- Monospace -->
<p class="font-mono">Monospace font</p>

Text Alignment

<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>

Text Transform

<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalize Each Word</p>
<p class="normal-case">Normal Case</p>

Text Decoration

<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<p class="no-underline">No underline (removes default)</p>

<!-- Underline styles -->
<p class="underline decoration-solid">Solid underline</p>
<p class="underline decoration-dotted">Dotted underline</p>
<p class="underline decoration-dashed">Dashed underline</p>
<p class="underline decoration-wavy">Wavy underline</p>

<!-- Underline color -->
<p class="underline decoration-blue-500">Colored underline</p>

Line Height

<p class="leading-none">No line height (1)</p>
<p class="leading-tight">Tight (1.25)</p>
<p class="leading-snug">Snug (1.375)</p>
<p class="leading-normal">Normal (1.5)</p>
<p class="leading-relaxed">Relaxed (1.625)</p>
<p class="leading-loose">Loose (2)</p>

Letter Spacing

<p class="tracking-tighter">Tighter tracking</p>
<p class="tracking-tight">Tight tracking</p>
<p class="tracking-normal">Normal tracking</p>
<p class="tracking-wide">Wide tracking</p>
<p class="tracking-wider">Wider tracking</p>
<p class="tracking-widest">Widest tracking</p>

Text Overflow

<!-- Truncate with ellipsis -->
<p class="truncate w-64">
  This is a long text that will be truncated with an ellipsis when it overflows
</p>

<!-- Show all text -->
<p class="overflow-visible">All text visible</p>

<!-- Hide overflow -->
<p class="overflow-hidden">Overflow hidden</p>

<!-- Scrollable -->
<div class="overflow-auto max-h-32">
  Long content that scrolls...
</div>

Practical Examples

Heading Styles

<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
  Main Heading
</h1>

<h2 class="text-3xl font-bold text-gray-800 mb-3">
  Section Heading
</h2>

<h3 class="text-2xl font-semibold text-gray-700 mb-2">
  Subsection Heading
</h3>

<p class="text-base text-gray-600 leading-relaxed">
  Body text with comfortable line height for reading.
</p>

Article Typography

<article class="prose prose-lg max-w-3xl mx-auto p-6">
  <h1 class="text-4xl font-bold text-gray-900 mb-4">
    Article Title
  </h1>

  <p class="text-gray-500 text-sm mb-8">
    Published on January 15, 2024 · 5 min read
  </p>

  <p class="text-gray-700 leading-relaxed mb-6">
    First paragraph with comfortable line height and spacing.
    This makes content easy to read.
  </p>

  <h2 class="text-2xl font-bold text-gray-800 mt-8 mb-4">
    Section Heading
  </h2>

  <p class="text-gray-700 leading-relaxed mb-6">
    Another paragraph continuing the article content.
  </p>

  <blockquote class="border-l-4 border-blue-500 pl-4 italic text-gray-600 my-6">
    "This is a quote that stands out from the rest of the text."
  </blockquote>

  <p class="text-gray-700 leading-relaxed">
    Final paragraph wrapping up the article.
  </p>
</article>

Colored Alerts

<!-- Success -->
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
  <p class="font-bold">Success!</p>
  <p class="text-sm">Your changes have been saved.</p>
</div>

<!-- Warning -->
<div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded">
  <p class="font-bold">Warning!</p>
  <p class="text-sm">Please review your information.</p>
</div>

<!-- Error -->
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
  <p class="font-bold">Error!</p>
  <p class="text-sm">Something went wrong. Please try again.</p>
</div>

<!-- Info -->
<div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded">
  <p class="font-bold">Info</p>
  <p class="text-sm">Here's some helpful information.</p>
</div>

Badge Styles

<!-- Status badges -->
<span class="inline-block bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">
  Active
</span>

<span class="inline-block bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">
  Inactive
</span>

<span class="inline-block bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">
  Pending
</span>

<span class="inline-block bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">
  New
</span>

<!-- Pills with solid background -->
<span class="inline-block bg-blue-500 text-white text-sm font-medium px-3 py-1 rounded-full">
  Badge
</span>

<span class="inline-block bg-purple-500 text-white text-sm font-medium px-3 py-1 rounded-full">
  Featured
</span>

Card with Typography

<div class="bg-white rounded-lg shadow-lg overflow-hidden max-w-md">
  <div class="bg-gradient-to-r from-blue-500 to-purple-600 h-32"></div>

  <div class="p-6">
    <h2 class="text-2xl font-bold text-gray-900 mb-2">
      Product Name
    </h2>

    <p class="text-gray-600 text-sm mb-4">
      Category · Brand
    </p>

    <p class="text-gray-700 leading-relaxed mb-6">
      A detailed description of the product that helps customers
      understand what they're buying.
    </p>

    <div class="flex items-center justify-between">
      <span class="text-3xl font-bold text-gray-900">$99.99</span>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-6 py-2 rounded-lg">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Pricing Card

<div class="bg-white rounded-lg shadow-xl p-8 max-w-sm border-t-4 border-blue-500">
  <div class="text-center mb-8">
    <h3 class="text-2xl font-bold text-gray-900 mb-2">Pro Plan</h3>
    <div class="flex items-baseline justify-center">
      <span class="text-5xl font-extrabold text-gray-900">$29</span>
      <span class="text-gray-500 ml-2">/month</span>
    </div>
  </div>

  <ul class="space-y-3 mb-8">
    <li class="flex items-center text-gray-700">
      <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
      </svg>
      Unlimited projects
    </li>
    <li class="flex items-center text-gray-700">
      <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
      </svg>
      Priority support
    </li>
    <li class="flex items-center text-gray-700">
      <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
      </svg>
      Advanced analytics
    </li>
  </ul>

  <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 rounded-lg">
    Get Started
  </button>
</div>

Key Takeaways

Colors range from 50 (lightest) to 950 (darkest)
Use text-{color}-{shade} for text colors
Use bg-{color}-{shade} for backgrounds
Gradients: bg-gradient-to-{direction} from-{color} to-{color}
Font sizes: text-xs through text-9xl
Font weights: font-thin through font-black
Line height: leading-{size} for readability
Combine utilities to create consistent, beautiful typography
Use opacity with /50, /75, /90, etc. for transparency

05 - Colors and Typography

Color System

Text Colors

Background Colors

Border Colors

Opacity

Typography

Font Size

Font Weight

Font Family

Text Alignment

Text Transform

Text Decoration

Line Height

Letter Spacing

Text Overflow

Practical Examples

Heading Styles

Article Typography

Colored Alerts

Badge Styles

Card with Typography

Pricing Card

Key Takeaways