Text Alignment & Decoration

Align text and apply decoration, transform, and truncation utilities for polished copy.

4 min read Level 1/5 #tailwind#typography

What you'll learn

Use text-left, center, right, and justify
Style underlines with decoration color, thickness, and offset
Use truncate and line-clamp for overflow

Alignment, decoration, and overflow handling are small touches that separate rough drafts from finished UI. Tailwind gives each its own utility family.

Alignment

<p class="text-left">Default reading alignment.</p>
<p class="text-center">Centered, good for hero copy.</p>
<p class="text-right">Right-aligned, e.g. numeric columns.</p>
<p class="text-justify">Justified body text.</p>

Decoration

The underline can be fully styled — color, thickness, and offset are independent utilities:

<a class="underline decoration-blue-500 decoration-2 underline-offset-4">
  A deliberate, readable link
</a>
<span class="line-through decoration-red-500">deprecated</span>

Transform

Casing is presentational, so let CSS do it instead of editing the text:

<span class="uppercase tracking-wide">eyebrow label</span>
<span class="capitalize">title case heading</span>

Truncation

For a single line, truncate clips with an ellipsis. For multiple lines, line-clamp-* caps the visible rows:

<p class="truncate">One very long line that gets an ellipsis…</p>

<p class="line-clamp-3">
  A longer paragraph that is clamped to three lines before fading
  out with an ellipsis, useful for card previews and feeds.
</p>

truncate needs the element to have a constrained width to actually clip.

Line Height & Letter Spacing →