Typography & Colors

Text and color utilities

Typography

<h1 class="font-display text-4xl font-bold tracking-tight text-slate-900">
  Learn Web Development
</h1>
<p class="mt-4 text-lg leading-relaxed text-slate-600">
  Build modern UIs with utility classes.
</p>
<span class="text-sm font-medium uppercase tracking-wider text-cyan-600">
  Featured
</span>

Colors and backgrounds

<div class="bg-slate-50 text-slate-900">
<div class="bg-gradient-to-r from-cyan-500 to-violet-500 text-white">
<button class="bg-cyan-500 hover:bg-cyan-600 text-white">
<div class="border border-slate-200 bg-white/80 backdrop-blur">

Opacity and gradients

text-white/80 — 80% opacity white text.
bg-black/50 — semi-transparent overlay.
from-*, via-*, to-* for linear gradients.