Question

Utilities for controlling the text color of an element.

Quick reference

Class	Properties	Preview
text-inherit	color: inherit;	Aa
text-current	color: currentColor;	Aa
text-transparent	color: transparent;	Aa
text-black	color: rgb(0 0 0);	Aa
text-white	color: rgb(255 255 255);	Aa
text-slate-50	color: rgb(248 250 252);	Aa
text-slate-100	color: rgb(241 245 249);	Aa
text-slate-200	color: rgb(226 232 240);	Aa
text-slate-300	color: rgb(203 213 225);	Aa
text-slate-400	color: rgb(148 163 184);	Aa
text-slate-500	color: rgb(100 116 139);	Aa
text-slate-600	color: rgb(71 85 105);	Aa
text-slate-700	color: rgb(51 65 85);	Aa
text-slate-800	color: rgb(30 41 59);	Aa
text-slate-900	color: rgb(15 23 42);	Aa
text-slate-950	color: rgb(2 6 23);	Aa
text-gray-50	color: rgb(249 250 251);	Aa
text-gray-100	color: rgb(243 244 246);	Aa
text-gray-200	color: rgb(229 231 235);	Aa
text-gray-300	color: rgb(209 213 219);	Aa
text-gray-400	color: rgb(156 163 175);	Aa
text-gray-500	color: rgb(107 114 128);	Aa
text-gray-600	color: rgb(75 85 99);	Aa
text-gray-700	color: rgb(55 65 81);	Aa
text-gray-800	color: rgb(31 41 55);	Aa
text-gray-900	color: rgb(17 24 39);	Aa
text-gray-950	color: rgb(3 7 18);	Aa
text-zinc-50	color: rgb(250 250 250);	Aa
text-zinc-100	color: rgb(244 244 245);	Aa
text-zinc-200	color: rgb(228 228 231);	Aa
text-zinc-300	color: rgb(212 212 216);	Aa
text-zinc-400	color: rgb(161 161 170);	Aa
text-zinc-500	color: rgb(113 113 122);	Aa
text-zinc-600	color: rgb(82 82 91);	Aa
text-zinc-700	color: rgb(63 63 70);	Aa
text-zinc-800	color: rgb(39 39 42);	Aa
text-zinc-900	color: rgb(24 24 27);	Aa
text-zinc-950	color: rgb(9 9 11);	Aa
text-neutral-50	color: rgb(250 250 250);	Aa
text-neutral-100	color: rgb(245 245 245);	Aa
text-neutral-200	color: rgb(229 229 229);	Aa
text-neutral-300	color: rgb(212 212 212);	Aa
text-neutral-400	color: rgb(163 163 163);	Aa
text-neutral-500	color: rgb(115 115 115);	Aa
text-neutral-600	color: rgb(82 82 82);	Aa
text-neutral-700	color: rgb(64 64 64);	Aa
text-neutral-800	color: rgb(38 38 38);	Aa
text-neutral-900	color: rgb(23 23 23);	Aa
text-neutral-950	color: rgb(10 10 10);	Aa
text-stone-50	color: rgb(250 250 249);	Aa
text-stone-100	color: rgb(245 245 244);	Aa
text-stone-200	color: rgb(231 229 228);	Aa
text-stone-300	color: rgb(214 211 209);	Aa
text-stone-400	color: rgb(168 162 158);	Aa
text-stone-500	color: rgb(120 113 108);	Aa
text-stone-600	color: rgb(87 83 78);	Aa
text-stone-700	color: rgb(68 64 60);	Aa
text-stone-800	color: rgb(41 37 36);	Aa
text-stone-900	color: rgb(28 25 23);	Aa
text-stone-950	color: rgb(12 10 9);	Aa
text-red-50	color: rgb(254 242 242);	Aa
text-red-100	color: rgb(254 226 226);	Aa
text-red-200	color: rgb(254 202 202);	Aa
text-red-300	color: rgb(252 165 165);	Aa
text-red-400	color: rgb(248 113 113);	Aa
text-red-500	color: rgb(239 68 68);	Aa
text-red-600	color: rgb(220 38 38);	Aa
text-red-700	color: rgb(185 28 28);	Aa
text-red-800	color: rgb(153 27 27);	Aa
text-red-900	color: rgb(127 29 29);	Aa
text-red-950	color: rgb(69 10 10);	Aa
text-orange-50	color: rgb(255 247 237);	Aa
text-orange-100	color: rgb(255 237 213);	Aa
text-orange-200	color: rgb(254 215 170);	Aa
text-orange-300	color: rgb(253 186 116);	Aa
text-orange-400	color: rgb(251 146 60);	Aa
text-orange-500	color: rgb(249 115 22);	Aa
text-orange-600	color: rgb(234 88 12);	Aa
text-orange-700	color: rgb(194 65 12);	Aa
text-orange-800	color: rgb(154 52 18);	Aa
text-orange-900	color: rgb(124 45 18);	Aa
text-orange-950	color: rgb(67 20 7);	Aa
text-amber-50	color: rgb(255 251 235);	Aa
text-amber-100	color: rgb(254 243 199);	Aa
text-amber-200	color: rgb(253 230 138);	Aa
text-amber-300	color: rgb(252 211 77);	Aa
text-amber-400	color: rgb(251 191 36);	Aa
text-amber-500	color: rgb(245 158 11);	Aa
text-amber-600	color: rgb(217 119 6);	Aa
text-amber-700	color: rgb(180 83 9);	Aa
text-amber-800	color: rgb(146 64 14);	Aa
text-amber-900	color: rgb(120 53 15);	Aa
text-amber-950	color: rgb(69 26 3);	Aa
text-yellow-50	color: rgb(254 252 232);	Aa
text-yellow-100	color: rgb(254 249 195);	Aa
text-yellow-200	color: rgb(254 240 138);	Aa
text-yellow-300	color: rgb(253 224 71);	Aa
text-yellow-400	color: rgb(250 204 21);	Aa
text-yellow-500	color: rgb(234 179 8);	Aa
text-yellow-600	color: rgb(202 138 4);	Aa
text-yellow-700	color: rgb(161 98 7);	Aa
text-yellow-800	color: rgb(133 77 14);	Aa
text-yellow-900	color: rgb(113 63 18);	Aa
text-yellow-950	color: rgb(66 32 6);	Aa
text-lime-50	color: rgb(247 254 231);	Aa
text-lime-100	color: rgb(236 252 203);	Aa
text-lime-200	color: rgb(217 249 157);	Aa
text-lime-300	color: rgb(190 242 100);	Aa
text-lime-400	color: rgb(163 230 53);	Aa
text-lime-500	color: rgb(132 204 22);	Aa
text-lime-600	color: rgb(101 163 13);	Aa
text-lime-700	color: rgb(77 124 15);	Aa
text-lime-800	color: rgb(63 98 18);	Aa
text-lime-900	color: rgb(54 83 20);	Aa
text-lime-950	color: rgb(26 46 5);	Aa
text-green-50	color: rgb(240 253 244);	Aa
text-green-100	color: rgb(220 252 231);	Aa
text-green-200	color: rgb(187 247 208);	Aa
text-green-300	color: rgb(134 239 172);	Aa
text-green-400	color: rgb(74 222 128);	Aa
text-green-500	color: rgb(34 197 94);	Aa
text-green-600	color: rgb(22 163 74);	Aa
text-green-700	color: rgb(21 128 61);	Aa
text-green-800	color: rgb(22 101 52);	Aa
text-green-900	color: rgb(20 83 45);	Aa
text-green-950	color: rgb(5 46 22);	Aa
text-emerald-50	color: rgb(236 253 245);	Aa
text-emerald-100	color: rgb(209 250 229);	Aa
text-emerald-200	color: rgb(167 243 208);	Aa
text-emerald-300	color: rgb(110 231 183);	Aa
text-emerald-400	color: rgb(52 211 153);	Aa
text-emerald-500	color: rgb(16 185 129);	Aa
text-emerald-600	color: rgb(5 150 105);	Aa
text-emerald-700	color: rgb(4 120 87);	Aa
text-emerald-800	color: rgb(6 95 70);	Aa
text-emerald-900	color: rgb(6 78 59);	Aa
text-emerald-950	color: rgb(2 44 34);	Aa
text-teal-50	color: rgb(240 253 250);	Aa
text-teal-100	color: rgb(204 251 241);	Aa
text-teal-200	color: rgb(153 246 228);	Aa
text-teal-300	color: rgb(94 234 212);	Aa
text-teal-400	color: rgb(45 212 191);	Aa
text-teal-500	color: rgb(20 184 166);	Aa
text-teal-600	color: rgb(13 148 136);	Aa
text-teal-700	color: rgb(15 118 110);	Aa
text-teal-800	color: rgb(17 94 89);	Aa
text-teal-900	color: rgb(19 78 74);	Aa
text-teal-950	color: rgb(4 47 46);	Aa
text-cyan-50	color: rgb(236 254 255);	Aa
text-cyan-100	color: rgb(207 250 254);	Aa
text-cyan-200	color: rgb(165 243 252);	Aa
text-cyan-300	color: rgb(103 232 249);	Aa
text-cyan-400	color: rgb(34 211 238);	Aa
text-cyan-500	color: rgb(6 182 212);	Aa
text-cyan-600	color: rgb(8 145 178);	Aa
text-cyan-700	color: rgb(14 116 144);	Aa
text-cyan-800	color: rgb(21 94 117);	Aa
text-cyan-900	color: rgb(22 78 99);	Aa
text-cyan-950	color: rgb(8 51 68);	Aa
text-sky-50	color: rgb(240 249 255);	Aa
text-sky-100	color: rgb(224 242 254);	Aa
text-sky-200	color: rgb(186 230 253);	Aa
text-sky-300	color: rgb(125 211 252);	Aa
text-sky-400	color: rgb(56 189 248);	Aa
text-sky-500	color: rgb(14 165 233);	Aa
text-sky-600	color: rgb(2 132 199);	Aa
text-sky-700	color: rgb(3 105 161);	Aa
text-sky-800	color: rgb(7 89 133);	Aa
text-sky-900	color: rgb(12 74 110);	Aa
text-sky-950	color: rgb(8 47 73);	Aa
text-blue-50	color: rgb(239 246 255);	Aa
text-blue-100	color: rgb(219 234 254);	Aa
text-blue-200	color: rgb(191 219 254);	Aa
text-blue-300	color: rgb(147 197 253);	Aa
text-blue-400	color: rgb(96 165 250);	Aa
text-blue-500	color: rgb(59 130 246);	Aa
text-blue-600	color: rgb(37 99 235);	Aa
text-blue-700	color: rgb(29 78 216);	Aa
text-blue-800	color: rgb(30 64 175);	Aa
text-blue-900	color: rgb(30 58 138);	Aa
text-blue-950	color: rgb(23 37 84);	Aa
text-indigo-50	color: rgb(238 242 255);	Aa
text-indigo-100	color: rgb(224 231 255);	Aa
text-indigo-200	color: rgb(199 210 254);	Aa
text-indigo-300	color: rgb(165 180 252);	Aa
text-indigo-400	color: rgb(129 140 248);	Aa
text-indigo-500	color: rgb(99 102 241);	Aa
text-indigo-600	color: rgb(79 70 229);	Aa
text-indigo-700	color: rgb(67 56 202);	Aa
text-indigo-800	color: rgb(55 48 163);	Aa
text-indigo-900	color: rgb(49 46 129);	Aa
text-indigo-950	color: rgb(30 27 75);	Aa
text-violet-50	color: rgb(245 243 255);	Aa
text-violet-100	color: rgb(237 233 254);	Aa
text-violet-200	color: rgb(221 214 254);	Aa
text-violet-300	color: rgb(196 181 253);	Aa
text-violet-400	color: rgb(167 139 250);	Aa
text-violet-500	color: rgb(139 92 246);	Aa
text-violet-600	color: rgb(124 58 237);	Aa
text-violet-700	color: rgb(109 40 217);	Aa
text-violet-800	color: rgb(91 33 182);	Aa
text-violet-900	color: rgb(76 29 149);	Aa
text-violet-950	color: rgb(46 16 101);	Aa
text-purple-50	color: rgb(250 245 255);	Aa
text-purple-100	color: rgb(243 232 255);	Aa
text-purple-200	color: rgb(233 213 255);	Aa
text-purple-300	color: rgb(216 180 254);	Aa
text-purple-400	color: rgb(192 132 252);	Aa
text-purple-500	color: rgb(168 85 247);	Aa
text-purple-600	color: rgb(147 51 234);	Aa
text-purple-700	color: rgb(126 34 206);	Aa
text-purple-800	color: rgb(107 33 168);	Aa
text-purple-900	color: rgb(88 28 135);	Aa
text-purple-950	color: rgb(59 7 100);	Aa
text-fuchsia-50	color: rgb(253 244 255);	Aa
text-fuchsia-100	color: rgb(250 232 255);	Aa
text-fuchsia-200	color: rgb(245 208 254);	Aa
text-fuchsia-300	color: rgb(240 171 252);	Aa
text-fuchsia-400	color: rgb(232 121 249);	Aa
text-fuchsia-500	color: rgb(217 70 239);	Aa
text-fuchsia-600	color: rgb(192 38 211);	Aa
text-fuchsia-700	color: rgb(162 28 175);	Aa
text-fuchsia-800	color: rgb(134 25 143);	Aa
text-fuchsia-900	color: rgb(112 26 117);	Aa
text-fuchsia-950	color: rgb(74 4 78);	Aa
text-pink-50	color: rgb(253 242 248);	Aa
text-pink-100	color: rgb(252 231 243);	Aa
text-pink-200	color: rgb(251 207 232);	Aa
text-pink-300	color: rgb(249 168 212);	Aa
text-pink-400	color: rgb(244 114 182);	Aa
text-pink-500	color: rgb(236 72 153);	Aa
text-pink-600	color: rgb(219 39 119);	Aa
text-pink-700	color: rgb(190 24 93);	Aa
text-pink-800	color: rgb(157 23 77);	Aa
text-pink-900	color: rgb(131 24 67);	Aa
text-pink-950	color: rgb(80 7 36);	Aa
text-rose-50	color: rgb(255 241 242);	Aa
text-rose-100	color: rgb(255 228 230);	Aa
text-rose-200	color: rgb(254 205 211);	Aa
text-rose-300	color: rgb(253 164 175);	Aa
text-rose-400	color: rgb(251 113 133);	Aa
text-rose-500	color: rgb(244 63 94);	Aa
text-rose-600	color: rgb(225 29 72);	Aa
text-rose-700	color: rgb(190 18 60);	Aa
text-rose-800	color: rgb(159 18 57);	Aa
text-rose-900	color: rgb(136 19 55);	Aa
text-rose-950	color: rgb(76 5 25);	Aa

Basic usage

Setting the text color

Use the text-* utilities to control the text color of an element.

The quick brown fox jumps over the lazy dog.

<p class="text-blue-600">The quick brown fox...</p><p class="text-sky-400">The quick brown fox...</p>

Changing the opacity

Use the color opacity modifier to control the opacity of an element’s text color.

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-blue-600/100">The quick brown fox...</p>
<p class="text-blue-600/75">The quick brown fox...</p>
<p class="text-blue-600/50">The quick brown fox...</p>
<p class="text-blue-600/25">The quick brown fox...</p>
<p class="text-blue-600/0">The quick brown fox...</p><p class="text-sky-400/100">The quick brown fox...</p>
<p class="text-sky-400/75">The quick brown fox...</p>
<p class="text-sky-400/50">The quick brown fox...</p>
<p class="text-sky-400/25">The quick brown fox...</p>
<p class="text-sky-400/0">The quick brown fox...</p>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<p class="text-blue-600/[.06]">The quick brown fox...</p>

---

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:text-blue-600 to only apply the text-blue-600 utility on hover.

Try hovering over the text to see the expected behaviour

The quick brown fox jumps over the lazy dog.

<p class="text-slate-500 hover:text-blue-600">The quick brown fox...</p><p class="text-slate-400 hover:text-sky-400">The quick brown fox...</p>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:text-green-600 to apply the text-green-600 utility at only medium screen sizes and above.

<p class="text-blue-600 md:text-green-600">
  <!-- ... -->
</p>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

---

Using custom values

Customizing your theme

By default, Tailwind makes the entire default color palette available as text colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Alternatively, you can customize just your text colors by editing theme.textColor or theme.extend.textColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off color value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<p class="text-[#50d71e]">
  <!-- ... -->
</p>

Learn more about arbitrary value support in the arbitrary values documentation.