Sections

Text color

Utilities for controlling the text color of an element.

Class Properties
.text-inherit color: inherit;
.text-primary color: $color_primary;
.text-base color: $color_text;
.text-black color: $color-black;
.text-white color: $color-white;
.text-transparent color: transparent;
.text-translucent color: rgba($color-white, .1);
.text-gray-100 color: $color-gray-100;
.text-gray-200 color: $color-gray-200;
.text-gray-300 color: $color-gray-300;
.text-gray-400 color: $color-gray-400;
.text-gray-500 color: $color-gray-500;
.text-gray-600 color: $color-gray-600;
.text-gray-700 color: $color-gray-700;
.text-gray-800 color: $color-gray-800;
.text-gray-900 color: $color-gray-900;

Usage

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

Color utilities are generated for all colors defined in the theme’s Sass $colors variable. By default this includes all colors except for the Heading, Text, Link and Outline theme colors.

Use .text-inherit to have the text color of an element inherited from its parent.

Theme colors

Use .text-primary and .text-base to set the text color of an element to the Primary or Text colors defined in the theme settings.

.text-primary

The quick brown fox jumped over the lazy dog.

.text-base

The quick brown fox jumped over the lazy dog.

<p class="text-primary">The quick brown fox jumped over the lazy dog.</p>
<p class="text-base">The quick brown fox jumped over the lazy dog.</p>

Color palettes

Use .text-gray-{shade} to set the text color to a shade of gray and .text-white, .text-black to set the text color to white and black, respectively.

.text-gray-100

The quick brown fox jumped over the lazy dog.

.text-gray-200

The quick brown fox jumped over the lazy dog.

.text-gray-300

The quick brown fox jumped over the lazy dog.

.text-gray-400

The quick brown fox jumped over the lazy dog.

.text-gray-500

The quick brown fox jumped over the lazy dog.

.text-gray-600

The quick brown fox jumped over the lazy dog.

.text-gray-700

The quick brown fox jumped over the lazy dog.

.text-gray-800

The quick brown fox jumped over the lazy dog.

.text-gray-900

The quick brown fox jumped over the lazy dog.

.text-white

The quick brown fox jumped over the lazy dog.

.text-black

The quick brown fox jumped over the lazy dog.

<p class="text-gray-100">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-200">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-300">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-400">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-500">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-600">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-700">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-800">The quick brown fox jumped over the lazy dog.</p>
<p class="text-gray-900">The quick brown fox jumped over the lazy dog.</p>

Use .text-transparent, .text-translucent to set the text color to transparent and translucent, respectively.

Additional color utilities are generated for all colors defined in Sass through the $colors variable. See Colors for the complete set of default color palettes.

Variants

By default, responsive and hover-state variants are generated for text color utilities.

Responsive

To control the text color of an element at a specific breakpoint, add a {screen}: prefix to any existing text color utility.

For example, use .md:text-gray-600 to apply the text-gray-600 utility at only medium screen sizes and above.

Hover-state

To control the text color of an element on hover, add the hover: prefix to any existing text color utility.

For example, use hover:text-gray-600 to apply the text-gray-600 utility when the mouse is hovered over the element.