Typography & Colors

<!-- Font size: text-{size} -->
<p class="text-xs">12px</p>
<p class="text-sm">14px</p>
<p class="text-base">16px (default)</p>
<p class="text-lg">18px</p>
<p class="text-xl">20px</p>
<p class="text-2xl">24px</p>
<p class="text-3xl">30px</p>
<p class="text-4xl">36px</p>

<!-- Font weight -->
<p class="font-thin">100</p>
<p class="font-normal">400</p>
<p class="font-medium">500</p>
<p class="font-semibold">600</p>
<p class="font-bold">700</p>
<p class="font-black">900</p>

<!-- Text color: text-{color}-{shade} (50, 100, 200...900, 950) -->
<p class="text-gray-900">Almost black</p>
<p class="text-gray-500">Mid gray</p>
<p class="text-blue-600">Blue</p>
<p class="text-red-500">Red</p>
<p class="text-emerald-600">Green</p>

<!-- Line height / tracking / alignment -->
<p class="leading-tight">Tight (1.25)</p>
<p class="leading-normal">Normal (1.5)</p>
<p class="leading-relaxed">Relaxed (1.625)</p>
<p class="tracking-wide">Wide letter spacing</p>
<p class="text-center">Centered</p>

<!-- Background colors -->
<div class="bg-white">White background</div>
<div class="bg-gray-50">Very light gray (good for page backgrounds)</div>
<div class="bg-blue-500">Blue</div>
<div class="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-lg">
  Gradient background
</div>

<!-- Borders -->
<div class="border">1px border (default gray)</div>
<div class="border-2 border-blue-500">2px blue border</div>
<div class="border-t border-gray-200">Top border only</div>
<div class="rounded">4px radius</div>
<div class="rounded-lg">8px radius</div>
<div class="rounded-xl">12px radius</div>
<div class="rounded-full">Full circle/pill</div>

<!-- Shadows -->
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">XL shadow</div>

<!-- Ring (focus-visible outline) -->
<button class="ring-2 ring-blue-500 ring-offset-2">Focused look</button>