Tailwind Text Alignment Utilities

What Are Text Alignment Utilities?

text-{align} utilities map to the CSS text-align property. Tailwind provides text-left, text-center, text-right, and text-justify, covering the standard horizontal text alignment values.

Text alignment differs from flex/grid alignment (justify-*, items-*), which position entire elements. text-* alignment only affects how inline text content flows within its own box.

<div class="text-center">
  <h1 class="text-2xl font-bold">Centered Heading</h1>
  <p class="text-slate-600">Centered supporting paragraph text.</p>
</div>

text-center on the wrapper centers both the heading and paragraph text inside it.

Text Alignment Syntax

class="text-left | text-center | text-right | text-justify"

• text-left is the default for left-to-right languages.
• text-center centers text horizontally within its container.
• text-right aligns text to the right edge.
• text-justify stretches text so each line fills the container width evenly, except the last line.

Text Alignment Cheatsheet

Every text alignment value and typical usage.

When Centered Text Works Best

Centered text works well for short content like hero headlines, empty states, or call-to-action sections, but tends to hurt readability for longer paragraphs, since ragged left edges make it harder for eyes to track from line to line.

<div class="mx-auto max-w-lg text-center">
  <h1 class="text-3xl font-bold">Build Faster With Tailwind</h1>
  <p class="mt-3 text-slate-600">A short, centered subheading works well here.</p>
</div>

text-start and text-end for RTL Support

text-start and text-end use logical CSS properties that adapt automatically to the page's text direction (dir="rtl" or dir="ltr"), unlike text-left/text-right, which are always physical regardless of direction.

<p class="text-start">
  This aligns to the start of the reading direction, left in LTR, right in RTL.
</p>

Prefer text-start/text-end over text-left/text-right on any site that needs to support right-to-left languages.

Responsive Alignment Switching

Combine text alignment with breakpoint prefixes to change alignment based on screen size, common in hero sections that center on mobile but left-align next to an image on desktop.

<div class="text-center md:text-left">
  <h1 class="text-3xl font-bold">Responsive Alignment</h1>
  <p class="text-slate-600">Centered on mobile, left-aligned on desktop.</p>
</div>

Common Mistakes

• Center-aligning long paragraphs of body text, which hurts readability compared to left-aligned text.
• Using text-left/text-right on multilingual sites instead of the logical text-start/text-end equivalents.
• Using text-justify, which can create distracting, uneven word spacing, especially on narrow columns.
• Confusing text alignment utilities with flex/grid alignment utilities (justify-*, items-*), which control box position rather than inline text flow.
• Not testing alignment changes across breakpoints when using a responsive alignment pattern.

Key Takeaways

• Tailwind's text alignment utilities map directly to the CSS text-align property.
• text-center suits short content; long paragraphs read better left-aligned.
• text-start/text-end are the direction-aware alternatives to text-left/text-right.
• Text alignment controls inline content flow, distinct from flex/grid box alignment utilities.
• Responsive alignment prefixes let hero sections adapt cleanly between mobile and desktop.