What is Text alignment in Tailwind?

Tailwindmarkup~5 mins

Text alignment in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Text alignment helps you control how text lines up inside a box. It makes your content look neat and easy to read.

When you want text to start from the left side, like in paragraphs.

When you want text centered, for titles or headings.

When you want text aligned to the right, like dates or prices.

When you want to justify text so both edges line up evenly.

When designing responsive layouts that need different text alignment on small or large screens.

Syntax

Tailwind

text-left
text-center
text-right
text-justify

Use these classes on any HTML element containing text.

Tailwind applies these classes by adding CSS text-align properties.

Examples

Text starts from the left side, which is the default in many languages.

Tailwind

<p class="text-left">This text is aligned to the left.</p>

This heading is centered horizontally in its container.

Tailwind

<h1 class="text-center">Centered Heading</h1>

Text lines up on the right side, useful for dates or numbers.

Tailwind

<div class="text-right">Right aligned text here.</div>

Justified text looks like a neat block, often used in books or newspapers.

Tailwind

<p class="text-justify">This paragraph is justified, so both left and right edges line up evenly.</p>

Sample Program

This example shows four blocks of text with different alignments using Tailwind CSS classes. Each block has a border and padding so you can see the alignment clearly.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Text Alignment Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section class="max-w-xl mx-auto space-y-6">
    <p class="text-left border border-gray-300 p-4">This text is aligned to the left.</p>
    <h2 class="text-center border border-gray-300 p-4">This heading is centered.</h2>
    <div class="text-right border border-gray-300 p-4">This text is aligned to the right.</div>
    <p class="text-justify border border-gray-300 p-4">
      This paragraph is justified, so the text lines up evenly on both the left and right edges. This makes the block look tidy and balanced.
    </p>
  </section>
</body>
</html>

OutputSuccess

Important Notes

Text alignment classes affect only horizontal alignment inside the element.

You can combine text alignment with responsive prefixes like sm:text-center to change alignment on different screen sizes.

Justified text can sometimes create uneven spacing between words; use it carefully.

Summary

Use text-left, text-center, text-right, or text-justify to align text horizontally.

Apply these classes to any text container to control how text lines up inside.

Combine with responsive prefixes for different alignments on different devices.