Text Alignment & Color

Text Alignment & Color

Text alignment

<p class="text-center">Centered text</p>

Text color

text-<color>-<shade>:

<p class="text-gray-500">Muted</p>
<p class="text-sky-600">Accent</p>

• Any theme color: text-red-500, text-blue-700, etc.
• Opacity with slash: text-gray-900/50.
• Arbitrary: text-[#316ff6].

Text decoration

• underline, overline, line-through, no-underline.
• decoration-<color> - decoration color.
• decoration-<n> - thickness: decoration-2, decoration-4.
• decoration-dashed, decoration-dotted, decoration-double, decoration-wavy.

Text transform

• uppercase, lowercase, capitalize, normal-case.

Text overflow & wrapping

• truncate - single line with ellipsis (overflow-hidden text-ellipsis whitespace-nowrap).
• text-ellipsis, text-clip.
• whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap.
• text-wrap, text-nowrap, text-balance, text-pretty.

<div class="max-w-xs truncate">A very long title that gets cut off</div>

TL;DR

• text-center, text-left, text-right align text.
• text-gray-500 colors text; text-gray-900/50 adds opacity.
• underline, uppercase, truncate for decorations/transform.
• text-balance evens out heading lines.