Text alignment

Simple text alignment

t-left

Lorem ipsum dolor sit amet...

t-center

Lorem ipsum dolor sit amet...

t-right

Lorem ipsum dolor sit amet...

Responsive text-alignment

Besides the text alignment classes above, there are other text alignment classes that take effect at the different media query breakpoint widths. So, here’s the full set of text alignment utility classes:

• t-left / sm:t-left / md:t-left / lg:t-left
• t-center / sm:t-center / md:t-center / lg:t-center
• t-right / sm:t-right / md:t-right / lg:t-right

With these, you can set the text alignment for phones first, and then override with a different text alignment for medium or large screens up.

An example card

Consider this card design:

In these cards the titles are left aligned (default) for small devices, and the cards are stacked on two rows. But for medium viewports up, the header becomes centered (at the same breakpount when the cards become arranged side-by-side).

<div class="rounded p-2 bg-amber-100">
  <h4 class="sm:t-center">Card header</h4>
  <p>Lorem ipsum dolor sit amet ...</p>
</div>