Text Color
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:
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: