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.

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">
    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">
    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">
    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">
    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">
    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">
    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">
    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">
    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>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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>