Style text with font family, size, weight, color, alignment, and truncation utilities — the core toolkit for readable UI copy.
Why: font-sans / font-serif / font-mono switch typefaces, text-sm through text-6xl set size, and font-light through font-black set weight — combine them to build a type scale.
<div class="space-y-3 p-4">
<p class="font-sans text-base">font-sans — The quick brown fox</p>
<p class="font-serif text-base">font-serif — The quick brown fox</p>
<p class="font-mono text-base">font-mono — The quick brown fox</p>
<p class="text-sm font-light">text-sm font-light</p>
<p class="text-xl font-semibold">text-xl font-semibold</p>
<p class="text-3xl font-bold">text-3xl font-bold</p>
</div>Why: text-* sets color from the same palette as backgrounds. text-left/center/right/justify controls alignment. underline, line-through, and decoration-* style the text-decoration line itself, including its color and thickness.
<div class="space-y-3 p-4">
<p class="text-center font-semibold text-indigo-600">Centered & colored</p>
<p class="text-right text-slate-500">Right aligned</p>
<p class="underline decoration-pink-500 decoration-2 underline-offset-4">
Underlined with a custom decoration color
</p>
<p class="text-slate-400 line-through">Strikethrough text</p>
</div>Why: leading-* controls line-height for readable paragraphs, tracking-* adjusts letter-spacing (great for uppercase headings), and whitespace-nowrap keeps text on a single line instead of wrapping.
<div class="space-y-4 p-4">
<p class="max-w-xs leading-tight">
leading-tight: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</p>
<p class="max-w-xs leading-loose">
leading-loose: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
</p>
<p class="text-xs font-semibold uppercase tracking-widest text-slate-500">
tracking-widest section label
</p>
<p class="w-32 overflow-hidden whitespace-nowrap rounded bg-slate-100 p-2 text-sm">
whitespace-nowrap keeps this on one line
</p>
</div>Why: truncate cuts text off with an ellipsis on a single line. line-clamp-* does the same across multiple lines — perfect for card descriptions and previews of variable-length content.
<div class="space-y-4 p-4">
<p class="w-48 truncate rounded bg-slate-100 p-2 text-sm">
This is a very long line of text that will be truncated with an ellipsis
</p>
<p class="line-clamp-2 w-48 rounded bg-slate-100 p-2 text-sm">
This paragraph is long enough to wrap onto several lines, but line-clamp-2
stops it after exactly two lines and adds an ellipsis at the cut-off point.
</p>
</div>