Text Align

Controls the alignment of text.

Utility	Properties
ta-c	`text-align: center;`
ta-e	`text-align: end;`
ta-j	`text-align: justify;`
ta-ja	`text-align: justify-all;`
ta-l	`text-align: left;`
ta-mp	`text-align: match-parent;`
ta-r	`text-align: right;`
ta-s	`text-align: start;`

Center

This example sets the text alignment to center. The text will be centered within its container.

Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live. I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to see you tomorrow night. I love you, and take care. — Vigo

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-md p-4 rad-1 ta-c tc-lead">
    Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.
    I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care. — Vigo
  </p>
</div>

End

This example sets the text alignment to end. The text will be aligned to the end of the container, which is typically the right side-to-right languages.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-md p-4 rad-1 ta-e tc-lead">
    Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.
    I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care. — Vigo
  </p>
</div>

Justify

This example sets the text alignment to justify. The text will be stretched to align with both and right edges of the container, creating a clean look.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-md p-4 rad-1 ta-j tc-lead">
    Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.
    I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care. — Vigo
  </p>
</div>

Justify All

This example sets the text alignment to justify-all. The text will be justified, including the last line, which will also stretch to fill the width of the container.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-md p-4 rad-1 ta-ja tc-lead">
    Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.
    I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care. — Vigo
  </p>
</div>

This example sets the text alignment t**. The text will be aligned to side of the container, which is the default alignment in most cases.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-md p-4 rad-1 ta-l tc-lead">
    Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.
    I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care. — Vigo
  </p>
</div>

Match Parent

This example sets the text alignment to match-parent. The text will inherit the text alignment from its parent element.

<div class="bg-indigo-1 p-4 rad-1 ta-j">
  <p class="bg-white fs-md p-4 rad-1 ta-mp tc-lead">
    Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.
    I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care. — Vigo
  </p>
</div>

Right

This example sets the text alignment to right. The text will be aligned to the right side of the container.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-md p-4 rad-1 ta-r tc-lead">
    Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.
    I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care. — Vigo
  </p>
</div>

Start

This example sets the text alignment to start. The text will be aligned to the start of the container, which is typically side-to-right languages.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-md p-4 rad-1 ta-s tc-lead">
    Hi, Anne. It's finally springtime here on Earth! I can't stand windy or cold days, so I'm very excited for the spring. There are so many beautiful, colorful trees where I live.
    I'll try to send you some pictures I took with the camera you gave me for my birthday. I've been a little under the weather lately, but I'll bounce back in no time so we can
    meet up and hug each other again. I can't wait to go to the grocery store with you like we did a decade ago. I hope you feel the same way and are as excited as much as I am to
    see you tomorrow night. I love you, and take care. — Vigo
  </p>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:ta-*,md:ta-*, lg:ta-*, and xxl:ta-* allows targeting specific utilities in different viewports.

<div class="ta-l md:ta-c ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:ta-* utility to override elements and change their values when hovering over them.

<div class="ta-l h:ta-c ..."></div>