1. Typography
  2. text-align

Typography

text-align

Utilities for controlling the alignment of text.

ClassStyles
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;

Examples

Left aligning text

Use the text-left utility to left align the text of an element:

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="text-left">So I started to walk into the water...</p>

Right aligning text

Use the text-right utility to right align the text of an element:

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="text-right">So I started to walk into the water...</p>

Centering text

Use the text-center utility to center the text of an element:

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="text-center">So I started to walk into the water...</p>

Justifying text

Use the text-justify utility to justify the text of an element:

So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.

<p class="text-justify">So I started to walk into the water...</p>

Responsive design

Prefix a text-align utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<p class="text-left md:text-center ...">  <!-- ... --></p>

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy