Tailwind CSS - Text Align

Tailwind CSS: Responsive Text Alignment

Tailwind provides a comprehensive set of utility classes to control the horizontal alignment of text. These utilities are fully responsive, allowing you to adapt your typography to different screen sizes with ease.

Core Text Alignment Classes

These classes correspond directly to the text-align CSS property.

Class	CSS Properties
text-left	text-align: left;
text-center	text-align: center;
text-right	text-align: right;
text-justify	text-align: justify;
text-start	text-align: start;
text-end	text-align: end;

Logical Properties: text-start and text-end

For modern, internationalized applications, it’s best practice to use logical properties. text-start and text-end align text based on the document’s writing direction (LTR vs. RTL).

• text-start: Aligns text to the left in Left-to-Right (LTR) languages like English, and to the right in Right-to-Left (RTL) languages like Arabic.
• text-end: Aligns text to the right in LTR languages and to the left in RTL languages.
• Best Practice: Prefer text-start and text-end over text-left and text-right to make your site more accessible and easier to localize.

Responsive Alignment in Practice

One of the most powerful features of Tailwind is applying utilities responsively. A common pattern is to have text centered on mobile devices and left-aligned on larger screens.

Example: Responsive Hero Section

In this example, all text is centered by default. On medium screens (md) and larger, the text alignment changes to text-left.

<div class="bg-slate-100 dark:bg-slate-800 p-8 rounded-lg">
  <div class="max-w-4xl mx-auto text-center md:text-left">
    <h2 class="text-3xl font-bold text-slate-900 dark:text-white sm:text-4xl">
      Responsive by Default
    </h2>
    <p class="mt-4 text-lg text-slate-600 dark:text-slate-400">
      This component's text is centered on mobile screens. On screens wider than 768px, it becomes left-aligned. This common UI pattern is trivial to implement with Tailwind's responsive variants.
    </p>
    <div class="mt-6">
      <a href="#" class="inline-block bg-indigo-600 text-white font-semibold px-5 py-3 rounded-md hover:bg-indigo-500">
        Get Started
      </a>
    </div>
  </div>
</div>

Justifying Text

The text-justify utility distributes text evenly across each line, creating clean, block-like edges. It is best used on multi-line paragraphs of text.

Example: Justified Article Text

<div class="max-w-2xl mx-auto p-4">
  <h1 class="text-2xl font-bold mb-4 text-start">The Art of Typography</h1>
  <p class="text-justify text-gray-700 leading-relaxed">
    Justified text can lend a formal, polished appearance to a block of content, reminiscent of a newspaper column or a printed book. It works by adjusting the spacing between words in each line so that the left and right edges of the text block are flush. While visually neat, it's important to ensure it doesn't create distracting 'rivers' of white space, which can impair readability. Use it thoughtfully for dense, paragraph-heavy content.
  </p>
</div>

Debugging Tip

If your text alignment isn’t working as expected, check the parent container. Text alignment is inherited. Also, ensure the text element is a block-level element (like <p>, <h1>, <div>) or an inline-block, and that it has room to align within its parent. You can’t center text inside a container that is the exact same width as the text itself.