Home Get StartedTokensDocsComponents

Text Color

Utilities for controlling the text color of an element.

Contents

Use text color utilities to set text to a specific color.

Quick reference

Class
text-primaryAa
text-secondaryAa
text-successAa
text-dangerAa
text-warningAa
text-infoAa
text-lightAa
text-darkAa
text-whiteAa
text-blackAa
text-bodyAa
text-body-secondaryAa
text-body-tertiaryAa

Basic usage

Setting the text color

Control the text color of an element using the text-{color} utilities.

The quick brown fox jumps over the lazy dog.

<p class="text-primary ...">The quick brown fox ...</p>

Changing the opacity

Control the opacity of an element’s text color using the color opacity text-opacity-* utilities.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<p class="text-primary text-opacity-100">The quick brown fox...</p>
<p class="text-primary text-opacity-75">The quick brown fox...</p>
<p class="text-primary text-opacity-50">The quick brown fox...</p>
<p class="text-primary text-opacity-25">The quick brown fox...</p>
<p class="text-primary text-opacity-0">The quick brown fox...</p>

Reset color

Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

The quick brown fox jumps over The lazy dog.

<p class="text-secondary">The quick brown fox jumps over
  <a href="#" class="text-reset">The lazy dog</a>
</p>
Edit this page on Github
Last edited by zhengchun on November 30, 2023