Bird
Raised Fist0
Tailwindmarkup~5 mins

Text alignment in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which Tailwind CSS class aligns text to the center inside a container?
easy
A. text-justify
B. text-left
C. text-center
D. text-right

Solution

  1. Step 1: Understand text alignment classes

    Tailwind provides text-left, text-center, text-right, and text-justify to align text horizontally.

  2. Step 2: Identify the class for center alignment

    The class text-center aligns text horizontally in the center of its container.

  3. Final Answer:

    text-center -> Option C

  4. Quick Check:

    Center aligned text = text-center [OK]
Hint: Center text with text-center class [OK]
Common Mistakes:
  • Confusing text-right with center alignment
  • Using text-justify for center alignment
  • Forgetting to add any alignment class
2. Which of these is the correct Tailwind class to align text to the right?
easy
A. text-right
B. text-center
C. text-left
D. text-align-right

Solution

  1. Step 1: Recall Tailwind text alignment classes

    Tailwind uses text-left, text-center, text-right, and text-justify for horizontal text alignment.

  2. Step 2: Identify the correct class for right alignment

    The correct class to align text to the right is text-right. The option text-align-right is not a valid Tailwind class.

  3. Final Answer:

    text-right -> Option A

  4. Quick Check:

    Right aligned text = text-right [OK]
Hint: Right align text with text-right class [OK]
Common Mistakes:
  • Using text-align-right instead of text-right
  • Mixing up text-left and text-right
  • Forgetting the text- prefix
3. What will be the horizontal alignment of the text inside this div?
<div class="text-justify">This is a sample paragraph.</div>
medium
A. Text aligned to the center
B. Text aligned to the right
C. Text aligned to the left
D. Text stretched to fill the container width with even edges

Solution

  1. Step 1: Understand the text-justify class effect

    The text-justify class makes text spread so both left and right edges align evenly, creating a block of text with straight edges on both sides.

  2. Step 2: Identify the visual result

    Text inside the div will be stretched to fill the container width with even edges on left and right, not just aligned left, right, or center.

  3. Final Answer:

    Text stretched to fill the container width with even edges -> Option D

  4. Quick Check:

    Justified text = text-justify [OK]
Hint: Justify text with text-justify for even edges [OK]
Common Mistakes:
  • Confusing justify with center alignment
  • Expecting text-justify to align left only
  • Ignoring the effect of text-justify on spacing
4. You want text inside a paragraph to be aligned left on small screens and center on medium screens and above. Which Tailwind classes fix this code?
<p class="text-center sm:text-left">Hello World</p>
medium
A. Replace with text-left sm:text-center
B. Replace with text-left md:text-center
C. Replace with text-center md:text-left
D. Replace with text-center sm:text-left (no change needed)

Solution

  1. Step 1: Understand responsive prefixes in Tailwind

    Classes without prefix apply to all screen sizes. Prefixes like sm:, md: apply from that screen size and up.

  2. Step 2: Analyze the requirement and current code

    We want left alignment on small screens and center on medium and larger. The current code aligns center by default and left on small screens, which is opposite.

  3. Step 3: Correct the classes

    Use text-left for default (small screens) and md:text-center for medium and above to get the desired effect.

  4. Final Answer:

    Replace with text-left md:text-center -> Option B

  5. Quick Check:

    Default left + md center = text-left md:text-center [OK]
Hint: Default class applies to all, use md: for medium screens [OK]
Common Mistakes:
  • Mixing sm: and md: prefixes incorrectly
  • Not setting default alignment properly
  • Assuming sm: applies only to small screens, not up
5. You want a paragraph's text to be left aligned on mobile, center aligned on tablets, and right aligned on desktops using Tailwind. Which class combination achieves this?
hard
A. text-left md:text-center lg:text-right
B. text-center sm:text-left lg:text-right
C. text-right md:text-center sm:text-left
D. text-left sm:text-center md:text-right

Solution

  1. Step 1: Understand Tailwind responsive prefixes

    Classes without prefix apply to all screen sizes (mobile by default). md: applies from medium screens (tablets) and up, lg: applies from large screens (desktops) and up.

  2. Step 2: Match alignment to screen sizes

    We want left alignment on mobile (default), center on tablets (md), and right on desktops (lg). So the classes should be text-left, md:text-center, and lg:text-right.

  3. Final Answer:

    text-left md:text-center lg:text-right -> Option A

  4. Quick Check:

    Mobile left, tablet center, desktop right = text-left md:text-center lg:text-right [OK]
Hint: Use no prefix for mobile, md: for tablets, lg: for desktops [OK]
Common Mistakes:
  • Using sm: instead of md: for tablets
  • Wrong order of prefixes causing override issues
  • Confusing screen size breakpoints