Check out our free templates made with AI and polished to perfection in Windframe

Get now
Last updated: 29th July 2025

Tailwind CSS Text-align

The text-align utility class in Tailwind CSS allows you to control the horizontal alignment of text within an element.


Tailwind Text align

The text-align utility class in Tailwind CSS allows you to control the horizontal alignment of text within an element. You can center text, left-align, right-align, or justify it โ€” all without writing custom CSS.

How to apply Tailwind Text Align

To apply the text alignment to an element, you can use the text-{alignment} utility class, where {alignment} represents the desired alignment. Here are the available alignment options:

  • text-left: Aligns the text to the left.
  • text-center: Centers the text horizontally.
  • text-right: Aligns the text to the right.
  • text-justify: Justifies the text, spreading it evenly across the container.

Tailwind Text-center

html
<div class="text-center">
In a bustling city, cars whizzed by, their honks echoing through the streets.
Pedestrians hurriedly walked, lost in their own thoughts, while street vendors
enticed passersby with the aroma of freshly brewed coffee and sizzling
delicacies. Neon lights illuminated the night sky, painting the cityscape in a
kaleidoscope of colors.
</div>

Preview

In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.

Tailwind Text-right

html
<div class="text-right">
In a bustling city, cars whizzed by, their honks echoing through the streets.
Pedestrians hurriedly walked, lost in their own thoughts, while street vendors
enticed passersby with the aroma of freshly brewed coffee and sizzling
delicacies. Neon lights illuminated the night sky, painting the cityscape in a
kaleidoscope of colors.
</div>

Preview

In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.

Tailwind Text-left

html
<div class="text-left">
In a bustling city, cars whizzed by, their honks echoing through the streets.
Pedestrians hurriedly walked, lost in their own thoughts, while street vendors
enticed passersby with the aroma of freshly brewed coffee and sizzling
delicacies. Neon lights illuminated the night sky, painting the cityscape in a
kaleidoscope of colors.
</div>

Preview

In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.

Tailwind Text-justify

html
<div class="text-justify">
In a bustling city, cars whizzed by, their honks echoing through the streets.
Pedestrians hurriedly walked, lost in their own thoughts, while street vendors
enticed passersby with the aroma of freshly brewed coffee and sizzling
delicacies. Neon lights illuminated the night sky, painting the cityscape in a
kaleidoscope of colors.
</div>

Preview

In a bustling city, cars whizzed by, their honks echoing through the streets. Pedestrians hurriedly walked, lost in their own thoughts, while street vendors enticed passersby with the aroma of freshly brewed coffee and sizzling delicacies. Neon lights illuminated the night sky, painting the cityscape in a kaleidoscope of colors.

Responsive Tailwind Text Align

Tailwind CSS allows you to apply text alignment classes responsively at different breakpoints. To use responsive text alignment classes, you can append the breakpoint prefix to the utility class. For example, md:text-right aligns the text to the right starting from the medium breakpoint and above.

html
<div class="text-left md:text-right">
<!-- Text content here -->
</div>

Preview

This text starts left, centers on medium screens, right-aligns on large screens.

In the above example, the text is aligned to the left by default (text-left), but starting from the medium breakpoint and above, the text alignment is changed to the center (md:text-center) and on large screen, the text alignment is changed to right(lg:text-right) .

Interaction States (Hover/Focus)

While not commonly used, you can change alignment on interaction:

html
<p class="text-left hover:text-center transition-all duration-300">
Hover to center this text.
</p>

Preview

Hover to center this text.

โš ๏ธ Be cautious with alignment shifts on interaction โ€” it can disrupt flow and layout._

Arbitrary Value Usage

text-align doesn't support arbitrary values (like text-[something]) because CSS text-align only accepts certain keywords. If you need something very custom, you'll need inline styles or custom classes.

html
<p style="text-align: center">Custom center aligned</p>

Preview

Custom center aligned

Customization in tailwind.config.js

Tailwind doesn't allow extending text-align classes directly since it's a limited CSS property โ€” but you can create custom utilities using the addUtilities plugin.

js
// tailwind.config.js
plugin(function ({ addUtilities }) {
addUtilities({
".text-balance": {
textAlignLast: "center",
},
});
});

Then use:

html
<p class="text-balance">Text with balanced alignment</p>

Real UI Examples (Practical + Creative)

๐Ÿ’ฌ Chat Bubbles (LTR/RTL support)

html
<div class="space-y-2">
<!-- User Message -->
<div class="text-right">
<div class="inline-block bg-blue-100 text-blue-900 px-4 py-2 rounded-lg">
Hey, are we still on for today?
</div>
</div>
<!-- Response -->
<div class="text-left">
<div class="inline-block bg-gray-200 text-gray-800 px-4 py-2 rounded-lg">
Yes, see you at 5!
</div>
</div>
</div>

Preview

Hey, are we still on for today?

Yes, see you at 5!

๐Ÿ“ Article Summary Section

html
<section class="max-w-2xl mx-auto text-justify">
<h2 class="text-xl font-semibold mb-2 text-center">Overview</h2>
<p>
This article explores the practical uses of Tailwind CSS for layout,
spacing, and component structure. You'll learn how utility-first styling
speeds up frontend development and keeps your styles consistent.
</p>
</section>

Preview

Overview

This article explores the practical uses of Tailwind CSS for layout, spacing, and component structure. You'll learn how utility-first styling speeds up frontend development and keeps your styles consistent.

html
<div class="text-right text-sm mt-4">
<p>Subtotal: $250.00</p>
<p>Tax: $20.00</p>
<p class="font-bold">Total: $270.00</p>
</div>

Preview

Subtotal: $250.00

Tax: $20.00

Total: $270.00

Best Practices

  • Use text-center sparingly โ€” it's great for short content like headings, not long paragraphs.

  • Prefer text-start/text-end for RTL-compatible designs.

  • Don't mix text-align with flex or grid alignment unless you know what's doing the positioning.

  • Use text-justify only when necessary โ€” it can cause awkward spacing on small screens.

Accessibility Notes

  • Text alignment doesn't directly affect screen readers, but it can impact readability:

  • Left-aligned text is the most readable in most languages.

  • Center-aligned text can be harder for dyslexic users or on small screens.

  • Justified text can introduce inconsistent word spacing, hurting readability.

๐Ÿ’ก If you're designing for accessibility, stick with text-left (or text-start) unless there's a solid design reason to do otherwise.

Tailwind Text Align Class Table

ClassProperties
text-lefttext-align: left;
text-centertext-align: center;
text-righttext-align: right;
text-justify text-align: justify;

โœจ What's Next?

Windframe Tailwind blocks

Landing page

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs!ย 

Build from scratch or select prebuilt tailwind templates