Now in this lesson, we will learn how to style text and colors — the things users notice first when viewing a UI.

🎯 What You Will Learn

By the end of this lesson, you’ll understand:

Let’s go step-by-step.

🔡 Text Size (text-*)

Tailwind provides a wide range of text sizes:

<p class="text-sm">Small text</p>
<p class="text-base">Default text</p>
<p class="text-lg">Large text</p>
<p class="text-3xl">Very large text</p>

Common sizes you’ll use most:

🏋️ Font Weight (font-*)

Use font weight to emphasize text:

<p class="font-light">Thin text</p>
<p class="font-normal">Regular text</p>
<p class="font-bold">Bold text</p>
<p class="font-extrabold">Extra bold text</p>

🎨 Text Colors (text-*)

Tailwind provides a large color palette. Here are examples with gray and blue:

<p class="text-gray-700">Neutral text</p>
<p class="text-blue-500">Colored text</p>

Common useful colors:

• text-gray-600 (soft, readable)
• text-gray-800 (strong, high contrast)
• text-blue-500 (primary action)

🎨 Background Colors (bg-*)

Apply background colors easily:

<div class="bg-gray-100 p-4">Light gray background</div>
<button class="bg-blue-500 text-white px-4 py-2 rounded">Primary button</button>

🖱️ Hover States (hover:*)

To add hover effects, just prefix with hover::

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Hover Me
</button>

Hover state should usually be slightly darker or lighter.

🎁 Mini Demo: Create a Clean Hero Section

Here’s a simple hero block you can copy and use:

<section class="p-8 text-center">
  <h1 class="text-4xl font-bold text-gray-900 mb-4">
    Welcome to TailwindCSS
  </h1>
  <p class="text-gray-600 mb-6">
    Build modern websites faster, easier, and without writing custom CSS.
  </p>
  <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded">
    Get Started
  </button>
</section>

What you see here:

• text-4xl font-bold → Large bold headline
• text-gray-600 → Soft body text
• bg-blue-500 hover:bg-blue-600 → Beautiful button with hover effect

Clean, simple, minimal design ✨

✅ Summary

Typography + Color = Professional looking UI