Text Color

Defines the color of the text inside of an element.

Classes
Class Properties
text-primary color: var(--primary-color);
Aa
text-white color: #ffffff;
Aa
text-0 color: var(--surface-0);
Aa
text-50 color: var(--surface-50);
Aa
text-100 color: var(--surface-100);
Aa
text-200 color: var(--surface-200);
Aa
text-300 color: var(--surface-300);
Aa
text-400 color: var(--surface-400);
Aa
text-500 color: var(--surface-500);
Aa
text-600 color: var(--surface-600);
Aa
text-700 color: var(--surface-700);
Aa
text-800 color: var(--surface-800);
Aa
text-900 color: var(--surface-900);
Aa
text-blue-50 color: var(--blue-50);
Aa
text-blue-100 color: var(--blue-100);
Aa
text-blue-200 color: var(--blue-200);
Aa
text-blue-300 color: var(--blue-300);
Aa
text-blue-400 color: var(--blue-400);
Aa
text-blue-500 color: var(--blue-500);
Aa
text-blue-600 color: var(--blue-600);
Aa
text-blue-700 color: var(--blue-700);
Aa
text-blue-800 color: var(--blue-800);
Aa
text-blue-900 color: var(--blue-900);
Aa
text-green-50 color: var(--green-50);
Aa
text-green-100 color: var(--green-100);
Aa
text-green-200 color: var(--green-200);
Aa
text-green-300 color: var(--green-300);
Aa
text-green-400 color: var(--green-400);
Aa
text-green-500 color: var(--green-500);
Aa
text-green-600 color: var(--green-600);
Aa
text-green-700 color: var(--green-700);
Aa
text-green-800 color: var(--green-800);
Aa
text-green-900 color: var(--green-900);
Aa
text-yellow-50 color: var(--yellow-50);
Aa
text-yellow-100 color: var(--yellow-100);
Aa
text-yellow-200 color: var(--yellow-200);
Aa
text-yellow-300 color: var(--yellow-300);
Aa
text-yellow-400 color: var(--yellow-400);
Aa
text-yellow-500 color: var(--yellow-500);
Aa
text-yellow-600 color: var(--yellow-600);
Aa
text-yellow-700 color: var(--yellow-700);
Aa
text-yellow-800 color: var(--yellow-800);
Aa
text-yellow-900 color: var(--yellow-900);
Aa
text-cyan-50 color: var(--cyan-50);
Aa
text-cyan-100 color: var(--cyan-100);
Aa
text-cyan-200 color: var(--cyan-200);
Aa
text-cyan-300 color: var(--cyan-300);
Aa
text-cyan-400 color: var(--cyan-400);
Aa
text-cyan-500 color: var(--cyan-500);
Aa
text-cyan-600 color: var(--cyan-600);
Aa
text-cyan-700 color: var(--cyan-700);
Aa
text-cyan-800 color: var(--cyan-800);
Aa
text-cyan-900 color: var(--cyan-900);
Aa
text-pink-50 color: var(--pink-50);
Aa
text-pink-100 color: var(--pink-100);
Aa
text-pink-200 color: var(--pink-200);
Aa
text-pink-300 color: var(--pink-300);
Aa
text-pink-400 color: var(--pink-400);
Aa
text-pink-500 color: var(--pink-500);
Aa
text-pink-600 color: var(--pink-600);
Aa
text-pink-700 color: var(--pink-700);
Aa
text-pink-800 color: var(--pink-800);
Aa
text-pink-900 color: var(--pink-900);
Aa
text-indigo-50 color: var(--indigo-50);
Aa
text-indigo-100 color: var(--indigo-100);
Aa
text-indigo-200 color: var(--indigo-200);
Aa
text-indigo-300 color: var(--indigo-300);
Aa
text-indigo-400 color: var(--indigo-400);
Aa
text-indigo-500 color: var(--indigo-500);
Aa
text-indigo-600 color: var(--indigo-600);
Aa
text-indigo-700 color: var(--indigo-700);
Aa
text-indigo-800 color: var(--indigo-800);
Aa
text-indigo-900 color: var(--indigo-900);
Aa
text-teal-50 color: var(--teal-50);
Aa
text-teal-100 color: var(--teal-100);
Aa
text-teal-200 color: var(--teal-200);
Aa
text-teal-300 color: var(--teal-300);
Aa
text-teal-400 color: var(--teal-400);
Aa
text-teal-500 color: var(--teal-500);
Aa
text-teal-600 color: var(--teal-600);
Aa
text-teal-700 color: var(--teal-700);
Aa
text-teal-800 color: var(--teal-800);
Aa
text-teal-900 color: var(--teal-900);
Aa
text-orange-50 color: var(--orange-50);
Aa
text-orange-100 color: var(--orange-100);
Aa
text-orange-200 color: var(--orange-200);
Aa
text-orange-300 color: var(--orange-300);
Aa
text-orange-400 color: var(--orange-400);
Aa
text-orange-500 color: var(--orange-500);
Aa
text-orange-600 color: var(--orange-600);
Aa
text-orange-700 color: var(--orange-700);
Aa
text-orange-800 color: var(--orange-800);
Aa
text-orange-900 color: var(--orange-900);
Aa
text-bluegray-50 color: var(--bluegray-50);
Aa
text-bluegray-100 color: var(--bluegray-100);
Aa
text-bluegray-200 color: var(--bluegray-200);
Aa
text-bluegray-300 color: var(--bluegray-300);
Aa
text-bluegray-400 color: var(--bluegray-400);
Aa
text-bluegray-500 color: var(--bluegray-500);
Aa
text-bluegray-600 color: var(--bluegray-600);
Aa
text-bluegray-700 color: var(--bluegray-700);
Aa
text-bluegray-800 color: var(--bluegray-800);
Aa
text-bluegray-900 color: var(--bluegray-900);
Aa
text-purple-50 color: var(--purple-50);
Aa
text-purple-100 color: var(--purple-100);
Aa
text-purple-200 color: var(--purple-200);
Aa
text-purple-300 color: var(--purple-300);
Aa
text-purple-400 color: var(--purple-400);
Aa
text-purple-500 color: var(--purple-500);
Aa
text-purple-600 color: var(--purple-600);
Aa
text-purple-700 color: var(--purple-700);
Aa
text-purple-800 color: var(--purple-800);
Aa
text-purple-900 color: var(--purple-900);
Aa
text-gray-50 color: var(--gray-50);
Aa
text-gray-100 color: var(--gray-100);
Aa
text-gray-200 color: var(--gray-200);
Aa
text-gray-300 color: var(--gray-300);
Aa
text-gray-400 color: var(--gray-400);
Aa
text-gray-500 color: var(--gray-500);
Aa
text-gray-600 color: var(--gray-600);
Aa
text-gray-700 color: var(--gray-700);
Aa
text-gray-800 color: var(--gray-800);
Aa
text-gray-900 color: var(--gray-900);
Aa
Examples
text-700
text-blue-700
text-purple-700

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="text-700 font-bold shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">text-700</div>
    <div class="text-blue-700 font-bold shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">text-blue-700</div>
    <div class="text-purple-700 font-bold shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">text-purple-700</div>
</div>

Pseudo States

Focus, Hover and Active states are available with the focus:, hover:, active: prefixes respectively.

hover:text-700
hover:text-blue-700
hover:text-purple-700

<div class="card flex flex-wrap md:justify-content-between justify-content-center">
    <div class="text-500 hover:text-700 font-bold shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:text-700</div>
    <div class="text-blue-500 hover:text-blue-700 font-bold shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:text-blue-700</div>
    <div class="text-purple-500 hover:text-purple-700 font-bold shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">hover:text-purple-700</div>
</div>