Text Align

Controls the alignment of text within its container. Tailwind provides utilities for left, center, right, and justify text alignment. These utilities help you create a clear visual hierarchy and improve readability in your designs. In Tailwind v4, text alignment utilities are optimized for better integration with custom fonts and variable fonts.

Typography1 variant4 examples

Official Docs Open Playground

Basic usage:

<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text</p>

Examples

Different text alignments

<p class="text-left">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-right">Right aligned text</p>
<p class="text-justify">Justified text</p>

Edit in playground

Text alignment used in a modern card design

<!-- Text alignment in a modern card design -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-blue-600 p-6 text-white">
    <h2 class="text-2xl font-bold mb-2 text-center">Modern Card Design</h2>
    <p class="text-lg font-medium italic text-center">Subtitle with italic style</p>
  </div>
  <div class="p-6">
    <p>This card uses different text alignments to create a clear hierarchy.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold">
      Call to Action
    </button>
  </div>
</div>

Edit in playground

Responsive typography with varying text alignments

<!-- Responsive typography with varying text alignments -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-center">
  Responsive Heading
</h1>
<p class="text-base md:text-lg lg:text-xl font-normal mb-4 text-left">
  This paragraph uses left alignment, but you can adjust it based on screen size.
</p>
<p class="text-sm md:text-base lg:text-lg font-semibold text-right">
  This text is right aligned and adjusts size responsively.
</p>

Edit in playground

Text alignment used in a modern interface

<!-- Text alignment in a modern interface -->
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-8 text-white">
    <h2 class="text-2xl font-extrabold mb-4 text-left">Dashboard Overview</h2>
    <p class="font-semibold text-center">Welcome back to your analytics dashboard</p>
  </div>
  <div class="p-6">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2 text-right">Statistics</h3>
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <p class="font-bold text-xl text-left">1,234</p>
          <p class="font-normal text-sm text-gray-600 text-center">Views</p>
        </div>
        <div>
          <p class="font-bold text-xl text-left">$5,678</p>
          <p class="font-normal text-sm text-gray-600 text-center">Revenue</p>
        </div>
        <div>
          <p class="font-bold text-xl text-left">90%</p>
          <p class="font-normal text-sm text-gray-600 text-center">Satisfaction</p>
        </div>
      </div>
    </div>
    <div>
      <h3 class="text-lg font-semibold mb-2 text-right">Recent Activity</h3>
      <div class="text-sm space-y-2">
        <p class="font-normal text-left">New comment on your post</p>
        <p class="font-normal text-left">Invoice #12345 paid</p>
        <p class="font-normal text-left">New subscriber to your newsletter</p>
      </div>
    </div>
  </div>
</div>

Edit in playground