Text Color

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

This example showcases various color utilities using the indigo colors from the default color palette.

• The tc-indigo-3 utility applies a lighter indigo shade.
• The tc-indigo utility applies the base indigo shade.
• The tc-indigo-8 utility applies a darker indigo shade.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <div class="bg-white d-g p-4 rad-1 rg-4">
    <p class="ta-c tc-indigo-3">Sphinx of black quartz, judge my vow.</p>
    <p class="ta-c tc-indigo">Sphinx of black quartz, judge my vow.</p>
    <p class="ta-c tc-indigo-8">Sphinx of black quartz, judge my vow.</p>
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Hover modifier

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

<div class="tc-lead h:tc ..."></div>