Text Transform

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

Capitalize

This example sets the text transform to capitalize. The first letter of each word will be converted to uppercase.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tt-c">Sphinx of black quartz, judge my vow.</p>
</div>

Lowercase

This example sets the text transform to lowercase. All letters in the text will be converted to lowercase.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tt-l">Sphinx of black quartz, judge my vow.</p>
</div>

None

Initial value

This example sets the text transform to none. The text will be displayed as it is, without any transformation applied.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tt-none">Sphinx of black quartz, judge my vow.</p>
</div>

Uppercase

This example sets the text transform to uppercase. All letters in the text will be converted to uppercase.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-lead tt-u">Sphinx of black quartz, judge my vow.</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:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="tt-none md:tt-c ..."></div>

Hover modifier

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

<div class="tt-none h:tt-c ..."></div>