⌘ K
esc

    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
    text-white-alpha-10 color: rgba(255,255,255,0.1);
    Aa
    text-white-alpha-20 color: rgba(255,255,255,0.2);
    Aa
    text-white-alpha-30 color: rgba(255,255,255,0.3);
    Aa
    text-white-alpha-40 color: rgba(255,255,255,0.4);
    Aa
    text-white-alpha-50 color: rgba(255,255,255,0.5);
    Aa
    text-white-alpha-60 color: rgba(255,255,255,0.6);
    Aa
    text-white-alpha-70 color: rgba(255,255,255,0.7);
    Aa
    text-white-alpha-80 color: rgba(255,255,255,0.8);
    Aa
    text-white-alpha-90 color: rgba(255,255,255,0.9);
    Aa
    text-black-alpha-10 color: rgba(0,0,0,0.1);
    Aa
    text-black-alpha-20 color: rgba(0,0,0,0.2);
    Aa
    text-black-alpha-30 color: rgba(0,0,0,0.3);
    Aa
    text-black-alpha-40 color: rgba(0,0,0,0.4);
    Aa
    text-black-alpha-50 color: rgba(0,0,0,0.5);
    Aa
    text-black-alpha-60 color: rgba(0,0,0,0.6);
    Aa
    text-black-alpha-70 color: rgba(0,0,0,0.7);
    Aa
    text-black-alpha-80 color: rgba(0,0,0,0.8);
    Aa
    text-black-alpha-90 color: rgba(0,0,0,0.9);
    Aa
    Examples
    text-500
    text-cyan-500
    text-orange-500
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container">
            <div class="text-500 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">text-500</div>
            <div class="text-cyan-500 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">text-cyan-500</div>
            <div class="text-orange-500 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">text-orange-500</div>
        </div>
    </div>
    
    
    Pseudo States

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

    hover:text-700
    hover:text-cyan-700
    hover:text-orange-700
    
    <div class="card">
        <div class="flex flex-wrap md:justify-content-between justify-content-center card-container">
            <div class="text-500 hover:text-700 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">hover:text-700</div>
            <div class="text-cyan-500 hover:text-cyan-700 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">hover:text-cyan-700</div>
            <div class="text-orange-500 hover:text-orange-700 w-12rem h-6rem surface-overlay border-round border-1 border-gray-500 font-bold m-2 flex align-items-center justify-content-center">hover:text-orange-700</div>
        </div>
    </div>