Text Alignment and Decoration

Align and decorate text with text-center, underline and more.

Syntaxclass="text-center underline uppercase"

Alignment utilities: text-left, text-center, text-right, text-justify.

Decoration: underline, line-through, no-underline, plus uppercase, lowercase, and capitalize.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer centers a hero tagline using text-center to align it under a centered logo.
A receipt totals column is right-aligned with text-right to visually align currency amounts for easy scanning.
A hyperlink in body copy is underlined only on hover using no-underline and hover:underline to keep the default state clean.

More examples

Alignment utilities

text-left, text-center, and text-right map directly to text-align CSS values, covering the three most common alignment needs.

<p class="text-left">Left-aligned (default)</p>
<p class="text-center">Centered text</p>
<p class="text-right">Right-aligned</p>

Underline on hover

no-underline removes the browser's default link underline, and hover:underline restores it only on cursor hover for a cleaner look.

<a href="/terms"
   class="text-indigo-600 no-underline hover:underline">
  Terms of Service
</a>

Strikethrough and truncate

line-through decorates an old price, while truncate adds overflow: hidden and text-overflow: ellipsis to clip long text with an ellipsis.

<p class="line-through text-gray-400">$99.00</p>
<p class="font-bold text-red-600">$49.00</p>
<p class="truncate max-w-xs text-gray-700">
  This very long product name gets cut off at the container edge.
</p>

Discussion

Be the first to comment on this lesson.