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

<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

Tailwind Text-right

<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

Tailwind Text-left

<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

Tailwind Text-justify

<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

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.

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

Preview

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:

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

Preview

⚠️ 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.

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

Preview

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.

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

Then use:

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

Real UI Examples (Practical + Creative)

💬 Chat Bubbles (LTR/RTL support)

<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

📝 Article Summary Section

<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

🧾 Invoice Summary Footer

<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

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

✨ What's Next?

• Tailwind Vertical align

Windframe Tailwind blocks

Landing page