Tailwind CSS - Caret Color

Previous
Quiz
Next

Tailwind CSS Caret Color is a collection of predefined classes that allow you to change the color of the text input cursor, also known as the blinking caret.

Tailwind CSS Caret Color Classes

Below is a list of Tailwind CSS Caret Color classes for applying different colors to the text cursor, helping it fit with your design.

Class CSS Properties
caret-inherit caret-color: inherit;
caret-current caret-color: currentColor;
caret-transparent caret-color: transparent;
caret-black caret-color: #000;
caret-white caret-color: #fff;
caret-slate-50 caret-color: #f8fafc;
caret-slate-100 caret-color: #f1f5f9;
caret-slate-200 caret-color: #e2e8f0;
caret-slate-300 caret-color: #cbd5e1;
caret-slate-400 caret-color: #94a3b8;
caret-slate-500 caret-color: #64748b;
caret-slate-600 caret-color: #475569;
caret-slate-700 caret-color: #334155;
caret-slate-800 caret-color: #1e293b;
caret-slate-900 caret-color: #0f172a;
caret-slate-950 caret-color: #020617;
caret-gray-50 caret-color: #f9fafb;
caret-gray-100 caret-color: #f3f4f6;
caret-gray-200 caret-color: #e5e7eb;
caret-gray-300 caret-color: #d1d5db;
caret-gray-400 caret-color: #9ca3af;
caret-gray-500 caret-color: #6b7280;
caret-gray-600 caret-color: #4b5563;
caret-gray-700 caret-color: #374151;
caret-gray-800 caret-color: #1f2937;
caret-gray-900 caret-color: #111827;
caret-gray-950 caret-color: #030712;
caret-zinc-50 caret-color: #fafafa;
caret-zinc-100 caret-color: #f4f4f5;
caret-zinc-200 caret-color: #e4e4e7;
caret-zinc-300 caret-color: #d4d4d8;
caret-zinc-400 caret-color: #a1a1aa;
caret-zinc-500 caret-color: #71717a;
caret-zinc-600 caret-color: #52525b;
caret-zinc-700 caret-color: #3f3f46;
caret-zinc-800 caret-color: #27272a;
caret-zinc-900 caret-color: #18181b;
caret-zinc-950 caret-color: #09090b;
caret-neutral-50 caret-color: #fafafa;
caret-neutral-100 caret-color: #f5f5f5;
caret-neutral-200 caret-color: #e5e5e5;
caret-neutral-300 caret-color: #d4d4d4;
caret-neutral-400 caret-color: #a3a3a3;
caret-neutral-500 caret-color: #737373;
caret-neutral-600 caret-color: #525252;
caret-neutral-700 caret-color: #404040;
caret-neutral-800 caret-color: #262626;
caret-neutral-900 caret-color: #171717;
caret-neutral-950 caret-color: #0a0a0a;
caret-stone-50 caret-color: #fafaf9;
caret-stone-100 caret-color: #f5f5f4;
caret-stone-200 caret-color: #e7e5e4;
caret-stone-300 caret-color: #d6d3d1;
caret-stone-400 caret-color: #a8a29e;
caret-stone-500 caret-color: #78716c;
caret-stone-600 caret-color: #57534e;
caret-stone-700 caret-color: #44403c;
caret-stone-800 caret-color: #292524;
caret-stone-900 caret-color: #1c1917;
caret-stone-950 caret-color: #0c0a09;
caret-red-50 caret-color: #fef2f2;
caret-red-100 caret-color: #fee2e2;
caret-red-200 caret-color: #fecaca;
caret-red-300 caret-color: #fca5a5;
caret-red-400 caret-color: #f87171;
caret-red-500 caret-color: #ef4444;
caret-red-600 caret-color: #dc2626;
caret-red-700 caret-color: #b91c1c;
caret-red-800 caret-color: #991b1b;
caret-red-900 caret-color: #7f1d1d;
caret-red-950 caret-color: #450a0a;
caret-orange-50 caret-color: #fff7ed;
caret-orange-100 caret-color: #ffedd5;
caret-orange-200 caret-color: #fed7aa;
caret-orange-300 caret-color: #fdba74;
caret-orange-400 caret-color: #fb923c;
caret-orange-500 caret-color: #f97316;
caret-orange-600 caret-color: #ea580c;
caret-orange-700 caret-color: #c2410c;
caret-orange-800 caret-color: #9a3412;
caret-orange-900 caret-color: #7c2d12;
caret-orange-950 caret-color: #431407;
caret-amber-50 caret-color: #fffbeb;
caret-amber-100 caret-color: #fef3c7;
caret-amber-200 caret-color: #fde68a;
caret-amber-300 caret-color: #fcd34d;
caret-amber-400 caret-color: #fbbf24;
caret-amber-500 caret-color: #f59e0b;
caret-amber-600 caret-color: #d97706;
caret-amber-700 caret-color: #b45309;
caret-amber-800 caret-color: #92400e;
caret-amber-900 caret-color: #78350f;
caret-amber-950 caret-color: #451a03;
caret-yellow-50 caret-color: #fefce8;
caret-yellow-100 caret-color: #fef9c3;
caret-yellow-200 caret-color: #fef08a;
caret-yellow-300 caret-color: #fde047;
caret-yellow-400 caret-color: #facc15;
caret-yellow-500 caret-color: #eab308;
caret-yellow-600 caret-color: #ca8a04;
caret-yellow-700 caret-color: #a16207;
caret-yellow-800 caret-color: #854d0e;
caret-yellow-900 caret-color: #713f12;
caret-yellow-950 caret-color: #422006;
caret-lime-50 caret-color: #f7fee7;
caret-lime-100 caret-color: #ecfccb;
caret-lime-200 caret-color: #d9f99d;
caret-lime-300 caret-color: #bef264;
caret-lime-400 caret-color: #a3e635;
caret-lime-500 caret-color: #84cc16;
caret-lime-600 caret-color: #65a30d;
caret-lime-700 caret-color: #4d7c0f;
caret-lime-800 caret-color: #3f6212;
caret-lime-900 caret-color: #365314;
caret-lime-950 caret-color: #1a2e05;
caret-green-50 caret-color: #f0fdf4;
caret-green-100 caret-color: #dcfce7;
caret-green-200 caret-color: #bbf7d0;
caret-green-300 caret-color: #86efac;
caret-green-400 caret-color: #4ade80;
caret-green-500 caret-color: #22c55e;
caret-green-600 caret-color: #16a34a;
caret-green-700 caret-color: #15803d;
caret-green-800 caret-color: #166534;
caret-green-900 caret-color: #14532d;
caret-green-950 caret-color: #052e16;
caret-emerald-50 caret-color: #ecfdf5;
caret-emerald-100 caret-color: #d1fae5;
caret-emerald-200 caret-color: #a7f3d0;
caret-emerald-300 caret-color: #6ee7b7;
caret-emerald-400 caret-color: #34d399;
caret-emerald-500 caret-color: #10b981;
caret-emerald-600 caret-color: #059669;
caret-emerald-700 caret-color: #047857;
caret-emerald-800 caret-color: #065f46;
caret-emerald-900 caret-color: #064e3b;
caret-emerald-950 caret-color: #022c22;
caret-teal-50 caret-color: #f0fdfa;
caret-teal-100 caret-color: #ccfbf1;
caret-teal-200 caret-color: #99f6e4;
caret-teal-300 caret-color: #5eead4;
caret-teal-400 caret-color: #2dd4bf;
caret-teal-500 caret-color: #14b8a6;
caret-teal-600 caret-color: #0d9488;
caret-teal-700 caret-color: #0f766e;
caret-teal-800 caret-color: #115e59;
caret-teal-900 caret-color: #134e4a;
caret-teal-950 caret-color: #042f2e;
caret-cyan-50 caret-color: #ecfeff;
caret-cyan-100 caret-color: #cffafe;
caret-cyan-200 caret-color: #a5f3fc;
caret-cyan-300 caret-color: #67e8f9;
caret-cyan-400 caret-color: #22d3ee;
caret-cyan-500 caret-color: #06b6d4;
caret-cyan-600 caret-color: #0891b2;
caret-cyan-700 caret-color: #0e7490;
caret-cyan-800 caret-color: #155e75;
caret-cyan-900 caret-color: #164e63;
caret-cyan-950 caret-color: #083344;
caret-sky-50 caret-color: #f0f9ff;
caret-sky-100 caret-color: #e0f2fe;
caret-sky-200 caret-color: #bae6fd;
caret-sky-300 caret-color: #7dd3fc;
caret-sky-400 caret-color: #38bdf8;
caret-sky-500 caret-color: #0ea5e9;
caret-sky-600 caret-color: #0284c7;
caret-sky-700 caret-color: #0369a1;
caret-sky-800 caret-color: #075985;
caret-sky-900 caret-color: #0c4a6e;
caret-sky-950 caret-color: #082f49;
caret-blue-50 caret-color: #eff6ff;
caret-blue-100 caret-color: #dbeafe;
caret-blue-200 caret-color: #bfdbfe;
caret-blue-300 caret-color: #93c5fd;
caret-blue-400 caret-color: #60a5fa;
caret-blue-500 caret-color: #3b82f6;
caret-blue-600 caret-color: #2563eb;
caret-blue-700 caret-color: #1d4ed8;
caret-blue-800 caret-color: #1e40af;
caret-blue-900 caret-color: #1e3a8a;
caret-blue-950 caret-color: #172554;
caret-indigo-50 caret-color: #eef2ff;
caret-indigo-100 caret-color: #e0e7ff;
caret-indigo-200 caret-color: #c7d2fe;
caret-indigo-300 caret-color: #a5b4fc;
caret-indigo-400 caret-color: #818cf8;
caret-indigo-500 caret-color: #6366f1;
caret-indigo-600 caret-color: #4f46e5;
caret-indigo-700 caret-color: #4338ca;
caret-indigo-800 caret-color: #3730a3;
caret-indigo-900 caret-color: #312e81;
caret-indigo-950 caret-color: #1e1b4b;
caret-violet-50 caret-color: #f5f3ff;
caret-violet-100 caret-color: #ede9fe;
caret-violet-200 caret-color: #ddd6fe;
caret-violet-300 caret-color: #c4b5fd;
caret-violet-400 caret-color: #a78bfa;
caret-violet-500 caret-color: #8b5cf6;
caret-violet-600 caret-color: #7c3aed;
caret-violet-700 caret-color: #6d28d9;
caret-violet-800 caret-color: #5b21b6;
caret-violet-900 caret-color: #4c1d95;
caret-violet-950 caret-color: #2e1065;
caret-purple-50 caret-color: #faf5ff;
caret-purple-100 caret-color: #f3e8ff;
caret-purple-200 caret-color: #e9d5ff;
caret-purple-300 caret-color: #d8b4fe;
caret-purple-400 caret-color: #c084fc;
caret-purple-500 caret-color: #a855f7;
caret-purple-600 caret-color: #9333ea;
caret-purple-700 caret-color: #7e22ce;
caret-purple-800 caret-color: #6b21a8;
caret-purple-900 caret-color: #581c87;
caret-purple-950 caret-color: #3b0764;
caret-fuchsia-50 caret-color: #fdf4ff;
caret-fuchsia-100 caret-color: #fae8ff;
caret-fuchsia-200 caret-color: #f5d0fe;
caret-fuchsia-300 caret-color: #f0abfc;
caret-fuchsia-400 caret-color: #e879f9;
caret-fuchsia-500 caret-color: #d946ef;
caret-fuchsia-600 caret-color: #c026d3;
caret-fuchsia-700 caret-color: #a21caf;
caret-fuchsia-800 caret-color: #86198f;
caret-fuchsia-900 caret-color: #701a75;
caret-fuchsia-950 caret-color: #4a044e;
caret-pink-50 caret-color: #fdf2f8;
caret-pink-100 caret-color: #fce7f3;
caret-pink-200 caret-color: #fbcfe8;
caret-pink-300 caret-color: #f9a8d4;
caret-pink-400 caret-color: #f472b6;
caret-pink-500 caret-color: #ec4899;
caret-pink-600 caret-color: #db2777;
caret-pink-700 caret-color: #be185d;
caret-pink-800 caret-color: #9d174d;
caret-pink-900 caret-color: #831843;
caret-pink-950 caret-color: #500724;
caret-rose-50 caret-color: #fff1f2;
caret-rose-100 caret-color: #ffe4e6;
caret-rose-200 caret-color: #fecdd3;
caret-rose-300 caret-color: #fda4af;
caret-rose-400 caret-color: #fb7185;
caret-rose-500 caret-color: #f43f5e;
caret-rose-600 caret-color: #e11d48;
caret-rose-700 caret-color: #be123c;
caret-rose-800 caret-color: #9f1239;
caret-rose-900 caret-color: #881337;
caret-rose-950 caret-color: #4c0519;

Functionality of Tailwind CSS Caret Color Classes

  • caret-inherit: Applies the parent elements text color to the caret.
  • caret-current: Applies the elements current text color to the caret.
  • caret-transparent: Applies a fully transparent color to the caret.
  • caret-black: Applies black color to the caret.
  • caret-white: Applies white color to the caret.
  • caret-slate-*: Applies various shades of slate to the caret.
  • caret-gray-*: Applies various shades of gray to the caret.
  • caret-zinc-*: Applies various shades of zinc to the caret.
  • caret-neutral-*: Applies various neutral shades to the caret.
  • caret-stone-*: Applies various shades of stone to the caret.
  • caret-red-*: Applies various shades of red to the caret.
  • caret-orange-*: Applies various shades of orange to the caret.
  • caret-amber-*: Applies various shades of amber to the caret.
  • caret-yellow-*: Applies various shades of yellow to the caret.
  • caret-lime-*: Applies various shades of lime to the caret.
  • caret-green-*: Applies various shades of green to the caret.
  • caret-emerald-*: Applies various shades of emerald to the caret.
  • caret-teal-*: Applies various shades of teal to the caret.
  • caret-cyan-*: Applies various shades of cyan to the caret.
  • caret-sky-*: Applies various shades of sky to the caret.
  • caret-blue-*: Applies various shades of blue to the caret.
  • caret-indigo-*: Applies various shades of indigo to the caret.
  • caret-violet-*: Applies various shades of violet to the caret.
  • caret-purple-*: Applies various shades of purple to the caret.
  • caret-fuchsia-*: Applies various shades of fuchsia to the caret.
  • caret-pink-*: Applies various shades of pink to the caret.
  • caret-rose-*: Applies various shades of rose to the caret.

Note: In 'caret-color-*', the '*' can be replaced with values from 50 (lightest) to 950 (darkest) for different shades.

Tailwind CSS Caret Color Class Examples

Below are examples of Tailwind CSS Caret Color classes, showing how to apply different colors to the text input cursor to improve its visibility or match your design.

Applying Caret Color Classes

Tailwind CSS's caret-color-* classes allow you to easily apply different colors and shades to the text input cursor. Each class combines a color name (e.g., 'red', 'blue', etc.) with a numeric value (e.g., '300', '400', '500') to indicate the shade intensity from light to dark.

This example shows how Tailwind CSS Caret Color classes change the color of the text cursor in input fields by applying different shades.

Example

  
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Caret Color
    </h2>
    <h3 class="underline font-bold mb-4">
        Click input fields to see caret colors
    </h3>
    <div class="space-y-4">
        <div >
            <input type="text" placeholder="Caret Red 500" 
                class="p-2 border caret-red-500" />
        </div>
        <div>
            <input type="text" placeholder="Caret Blue 700" 
                class="p-2 border caret-blue-700" />
        </div>
        <div>
            <input type="text" placeholder="Caret Lime 600" 
                class="p-2 border caret-lime-600" />
        </div>
        <div>
            <input type="text" placeholder="Caret Teal 500" 
                class="p-2 border caret-teal-500" />
        </div>
    </div> 
</body>

</html>

Applying Caret Colors with Hover Effects

This example shows how to use Tailwind CSS Caret Color Classes to change the color of the text cursor (caret) in input fields. It includes different colors for the caret and shows how these colors change on hover and focus.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Caret Color 
    </h2>
    <h3 class="underline font-bold mb-4">
        Applying Caret Color with Hover and Focus Effects
    </h3>
    <div class="space-y-4">
        <div class="flex items-center space-x-4">
            <label class="w-1/4 font-semibold">Caret Red:</label>
            <input type="text" placeholder="Type here..."
                class="p-2 border border-gray-300 caret-red-500 
                       focus:border-red-700 focus:caret-red-700 
                       hover:border-red-500 hover:caret-red-500"
            />
        </div>
        <div class="flex items-center space-x-4">
            <label class="w-1/4 font-semibold">Caret Blue:</label>
            <input type="text" placeholder="Type here..."
                class="p-2 border border-gray-300 caret-blue-500 
                       focus:border-blue-700 focus:caret-blue-700 
                       hover:border-blue-500 hover:caret-blue-500"
            />
        </div>
        <div class="flex items-center space-x-4">
            <label class="w-1/4 font-semibold">Caret Green:</label>
            <input type="text" placeholder="Type here..."
                class="p-2 border border-gray-300 caret-green-500 
                       focus:border-green-700 focus:caret-green-700 
                       hover:border-green-500 hover:caret-green-500"
            />
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next