| 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-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.
<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.
<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>
<p class="text-red-500">The quick brown fox jumped over the lazy dog.</p>
<p class="text-green-500">The quick brown fox jumped over the lazy dog.</p>Additional color utilities are generated for all colors defined in Sass through the $colors variable.
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.