Tailwind CSS Academy · Lesson

Text Alignment and Decoration

Align text with text-left, text-center, and text-right, and add underlines, strikethroughs, and transformations like uppercase.

Text Alignment Basics

Position text with alignment: text-left (default), text-center, text-right, text-justify. Centered feels formal; left-aligned is easiest for long passages.

<p class="text-left">Left-aligned (default for LTR text)</p>
<p class="text-center">Center-aligned (good for headings, CTAs)</p>
<p class="text-right">Right-aligned (good for numbers, dates)</p>
<p class="text-justify">Justified text (edges align to container sides)</p>

When to Use Each Alignment

Choose alignment by purpose: text-center for hero headlines, text-left for body and forms, text-right for prices and dates. Skip text-justify in dense text.

<div class="text-center mb-8">
  <h1 class="text-4xl font-bold">Centered Hero Headline</h1>
  <p class="text-lg text-gray-500 mt-2">Centered subtitle works for marketing.</p>
</div>
<article class="text-left">
  <p class="text-base text-gray-700 leading-relaxed">
    Body text always reads better left-aligned.
  </p>
</article>

All lessons in this course

← Back to Tailwind CSS Academy