Text Color

Utilities for controlling the text color of an element.

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

Class reference

Class Properties
.text-transparent color: transparent;
.text-black color: #22292f;
.text-grey-darkest color: #3d4852;
.text-grey-darker color: #606f7b;
.text-grey-dark color: #8795a1;
.text-grey color: #b8c2cc;
.text-grey-light color: #dae1e7;
.text-grey-lighter color: #f1f5f8;
.text-grey-lightest color: #f8fafc;
.text-white color: #ffffff;
.text-red-darkest color: #3b0d0c;
.text-red-darker color: #621b18;
.text-red-dark color: #cc1f1a;
.text-red color: #e3342f;
.text-red-light color: #ef5753;
.text-red-lighter color: #f9acaa;
.text-red-lightest color: #fcebea;
.text-orange-darkest color: #462a16;
.text-orange-darker color: #613b1f;
.text-orange-dark color: #de751f;
.text-orange color: #f6993f;
.text-orange-light color: #faad63;
.text-orange-lighter color: #fcd9b6;
.text-orange-lightest color: #fff5eb;
.text-yellow-darkest color: #453411;
.text-yellow-darker color: #684f1d;
.text-yellow-dark color: #f2d024;
.text-yellow color: #ffed4a;
.text-yellow-light color: #fff382;
.text-yellow-lighter color: #fff9c2;
.text-yellow-lightest color: #fcfbeb;
.text-green-darkest color: #0f2f21;
.text-green-darker color: #1a4731;
.text-green-dark color: #1f9d55;
.text-green color: #38c172;
.text-green-light color: #51d88a;
.text-green-lighter color: #a2f5bf;
.text-green-lightest color: #e3fcec;
.text-teal-darkest color: #0d3331;
.text-teal-darker color: #20504f;
.text-teal-dark color: #38a89d;
.text-teal color: #4dc0b5;
.text-teal-light color: #64d5ca;
.text-teal-lighter color: #a0f0ed;
.text-teal-lightest color: #e8fffe;
.text-blue-darkest color: #12283a;
.text-blue-darker color: #1c3d5a;
.text-blue-dark color: #2779bd;
.text-blue color: #3490dc;
.text-blue-light color: #6cb2eb;
.text-blue-lighter color: #bcdefa;
.text-blue-lightest color: #eff8ff;
.text-indigo-darkest color: #191e38;
.text-indigo-darker color: #2f365f;
.text-indigo-dark color: #5661b3;
.text-indigo color: #6574cd;
.text-indigo-light color: #7886d7;
.text-indigo-lighter color: #b2b7ff;
.text-indigo-lightest color: #e6e8ff;
.text-purple-darkest color: #21183c;
.text-purple-darker color: #382b5f;
.text-purple-dark color: #794acf;
.text-purple color: #9561e2;
.text-purple-light color: #a779e9;
.text-purple-lighter color: #d6bbfc;
.text-purple-lightest color: #f3ebff;
.text-pink-darkest color: #451225;
.text-pink-darker color: #6f213f;
.text-pink-dark color: #eb5286;
.text-pink color: #f66d9b;
.text-pink-light color: #fa7ea8;
.text-pink-lighter color: #ffbbca;
.text-pink-lightest color: #ffebef;

Hover

In addition to the standard responsive variations, text colors also come in hover: variations that apply the given text color on hover.

<button class="text-blue-dark hover:text-red-dark border-2 border-blue hover:border-red bg-transparent py-2 px-4 font-semibold rounded">
  Button
</button>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the hover: prefix.

<button class="... md:text-blue md:hover:text-red ...">Button</button>

Customizing

Responsive and State Variants

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

You can control which variants are generated for the text color utilities by modifying the textColors property in the modules section of your Tailwind config file.

For example, this config will also generate focus variants:

{
// ...
modules: {
    // ...
-   textColors: ['responsive', 'hover'],
+   textColors: ['responsive', 'hover', 'focus'],
}
}

Disabling

If you don't plan to use the text color utilities in your project, you can disable them entirely by setting the textColors property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   textColors: ['responsive', 'hover'],
+   textColors: false,
}
}