Tailwind CSS Text Align Tutorial for Beginners

Text alignment controls how your content is positioned inside a container.

In traditional CSS, you write:

text-align: center;

In Tailwind CSS, you simply write:

class="text-center"

That’s it.

No custom CSS needed.

In this guide, you’ll learn:

All Tailwind text alignment classes
When to use each one
Logical alignment (RTL support)
Responsive text alignment
Complete working example

Let’s start.

Text Alignment Classes in Tailwind

Tailwind provides these utilities:

Class	CSS Applied
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

1. Left Align (text-left)

This is the default alignment for most languages like English.

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

Best used for:

Paragraphs
Blog content
Articles
Documentation

2. Center Align (text-center)

Used for:

Headings
Hero sections
Call-to-action sections
Buttons

<p class="text-center">
  This text is centered.
</p>

Center alignment grabs attention.

3. Right Align (text-right)

Used less frequently, but helpful for:

Price labels
Metadata
RTL layouts
Footer sections

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

4. Justify Text (text-justify)

This spreads text evenly across the full width.

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

Best for:

Long-form articles
Newspaper-style layouts

Be careful — excessive justification can reduce readability on small screens.

5. Logical Alignment (text-start & text-end)

These utilities adapt automatically based on text direction.

Instead of forcing left or right, you can use:

class="text-start"
class="text-end"

Example (RTL support)

<div dir="rtl" lang="ar">
  <p class="text-end">
    هذا النص محاذي للنهاية حسب اتجاه اللغة.
  </p>
</div>

Why this matters:

Works perfectly for multilingual websites
Automatically adapts between LTR and RTL
Cleaner internationalization support

Responsive Text Alignment

You can change alignment based on screen size.

Example:

<p class="text-left md:text-center">
  This is left on mobile, centered on medium screens and above.
</p>

Meaning:

Mobile → Left aligned
Tablet/Desktop → Center aligned

Very useful for responsive hero sections.

Complete Working Example (Full Page Demo)

Copy and test this full example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tailwind Text Align Example</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">

  <div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg">

    <!-- Heading -->
    <h1 class="text-4xl font-bold text-center mb-8">
      Tailwind CSS Text Alignment Demo
    </h1>

    <!-- Left Align -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Left Aligned</h2>
      <p class="text-left text-gray-700">
        This paragraph is aligned to the left. This is the default alignment for most English content.
      </p>
    </div>

    <!-- Center Align -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Center Aligned</h2>
      <p class="text-center text-gray-700">
        This paragraph is centered. Useful for hero sections and call-to-actions.
      </p>
    </div>

    <!-- Right Align -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Right Aligned</h2>
      <p class="text-right text-gray-700">
        This paragraph is aligned to the right.
      </p>
    </div>

    <!-- Justify -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Justified Text</h2>
      <p class="text-justify text-gray-700">
        This paragraph is justified. Both the left and right edges are aligned evenly across the container width, creating a clean newspaper-style layout.
      </p>
    </div>

    <!-- Responsive Example -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Responsive Alignment</h2>
      <p class="text-left md:text-center text-gray-700">
        This text is left-aligned on mobile but becomes centered on medium screens and larger.
      </p>
    </div>

    <!-- Logical Properties Example -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Logical Alignment (RTL Example)</h2>
      <div dir="rtl" lang="ar" class="bg-gray-50 p-4 rounded">
        <p class="text-end text-gray-700">
          هذا النص يستخدم text-end ويتغير حسب اتجاه اللغة.
        </p>
      </div>
    </div>

  </div>

</body>
</html>

This example demonstrates:

All alignment types
Responsive alignment
RTL support
Clean layout design
Professional styling

Best Practices

Use text-left for most paragraph content
Use text-center for headings and CTAs
Avoid overusing text-justify on small screens
Use text-start and text-end for multilingual websites
Always test alignment on mobile devices

Alignment affects readability and visual hierarchy.

Frequently Asked Questions

What is the default text alignment?

Left (for LTR languages).

How do I center text in Tailwind?

class="text-center"

How do I make alignment responsive?

class="text-left md:text-center"

What is the difference between text-left and text-start?

text-left → Always left
text-start → Automatically adapts based on text direction

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Font Weight Tutorial (Complete Beginner Guide with Examples)

Next: Tailwind CSS Line Height (Leading) Tutorial – Complete Beginner Guide with Examples

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us