Yumma CSS 3.0 — All new CLI, utilities, and more 🎉

Text Align

Controls the alignment of text.

Utility	Properties
Failed to load data. Please try again later.

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

Initial value

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 modifier

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 modifier

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>