Skip to content

Text Color

Controls the text color of an element.

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:-* utility to override elements and change their values when hovering over them.

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