Text alignment controls where your text sits within its container. Tailwind provides four alignment utilities that cover every scenario you'll need.
Alignment options
<p class="text-left">Left aligned — default for LTR languages</p>
<p class="text-center">Center aligned — great for headings</p>
<p class="text-right">Right aligned — useful for prices, dates</p>
<p class="text-justify">Justified — spreads text across the full width</p>
Responsive alignment
Alignment is one of the most common responsive adjustments. Left-align on mobile, center on desktop — Tailwind makes this trivial.
<h1 class="text-center md:text-left text-3xl font-bold">
Mobile centered, desktop left
</h1>
Practical patterns
Cards, hero sections, and call-to-action blocks almost always use centered text. Article bodies and paragraphs use left alignment. Navigation items and prices often use right alignment.
<div class="bg-blue-600 text-white p-12 text-center">
<h2 class="text-4xl font-bold mb-4">Ready to start?</h2>
<p class="text-xl mb-8">Join thousands of developers today.</p>
<button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold">
Get Started
</button>
</div>