Text Align

Controls the alignment of text.

Class	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.

The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it contains all the letters of the alphabet, meeting the criteria for such a composition.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead">
    The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it
    contains all the letters of the alphabet, meeting the criteria for such a composition.
  </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 in left-to-right languages.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-e tc-lead">
    The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it
    contains all the letters of the alphabet, meeting the criteria for such a composition.
  </p>
</div>

Justify

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

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-j tc-lead">
    The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it
    contains all the letters of the alphabet, meeting the criteria for such a composition.
  </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-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-ja tc-lead">
    The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it
    contains all the letters of the alphabet, meeting the criteria for such a composition.
  </p>
</div>

Left

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

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-l tc-lead">
    The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it
    contains all the letters of the alphabet, meeting the criteria for such a composition.
  </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-l-indigo-6 p-4 rad-1 ta-j">
  <p class="bg-white fs-sm p-4 rad-1 ta-mp tc-lead">
    The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it
    contains all the letters of the alphabet, meeting the criteria for such a composition.
  </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-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-r tc-lead">
    The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it
    contains all the letters of the alphabet, meeting the criteria for such a composition.
  </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 the left side in left-to-right languages.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-s tc-lead">
    The quick brown fox jumps over the lazy dog. It is a well-known pangram, one that has gained significant popularity and has been utilized by many people. As a pangram, it
    contains all the letters of the alphabet, meeting the criteria for such a composition.
  </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>