Menu

Tailwind CSS Caret Color

The caret color is a property in CSS that determines the color of the blinking cursor that appears when you interact with input fields or text areas. This feature enhances usability and accessibility by allowing you to change the cursor color to match your design and improve text visibility.

Tailwind CSS offers a set of utilities to control the caret color, making the process streamlined for developers. In this guide, we’ll explore all the facets of managing caret color using Tailwind CSS, including conditional application, customization, and more.

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

Overview of Caret Color

Adding the Caret Color

Tailwind provides a range of predefined classes for standard colors. All you need to do is use the respective utility class on your input element or any interactive text container.

Usage in JSX:

This is a live editor. Play around with it!
export default function CaretDemo() {
  return (
    <div className="h-screen w-screen bg-gray-100 flex justify-center items-center">
      <input
        type="text"
        className="caret-yellow-600 border border-gray-300 px-4 py-2 rounded focus:outline-none"
        placeholder="Type here..."
      />
    </div>
  );
}

States and Responsiveness

Tailwind allows you to conditionally apply caret color utilities with support for state-based and responsive modifiers, like hover:, focus:, or even media query breakpoints.

Hover and Focus States

You can apply caret color styles that change when specific states, such as hover or focus, are active on an element. This is ideal for interactive designs, where different state colors improve user experience.

This is a live editor. Play around with it!
export default function InteractiveCaret() {
  return (
    <div className="h-screen w-screen flex justify-center items-center bg-gray-200">
      <input
        type="text"
        className="focus:caret-green-500 border border-gray-300 px-4 py-2 rounded"
        placeholder="Type something here..."
      />
    </div>
  );
}

Breakpoint Modifiers

Responsive modifiers enable you to configure caret colors based on different screen sizes — perfect when designing for varying devices.

This is a live editor. Play around with it!
export default function ResponsiveCaret() {
  return (
    <div className="h-screen w-screen bg-gray-50 flex justify-center items-center">
      <input
        type="text"
        className="
          caret-black
          md:caret-blue-400
          lg:caret-purple-600 
          px-4 py-2 border border-gray-400 rounded"
        placeholder="Resize the screen to observe changes..."
      />
    </div>
  );
}

This snippet uses the following breakpoint logic:

  • Default (Small screens): Black caret via caret-black.
  • Medium screens (md): Blue caret using md:caret-blue-400.
  • Large screens and up (lg): Purple caret using lg:caret-purple-600.

Custom Caret Color

Tailwind doesn’t limit you to the default framework palette. You can create custom caret styles with flexibility, utilizing theme extensions or arbitrary values.

Extending the Theme

Extend the Tailwind configuration to include custom caret colors in your project. This lets you define unique values and semantically name them for easy reuse.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomThemeCaret() {
  return (
    <div className="h-screen w-screen flex justify-center items-center bg-gray-200">
      <input
        type="text"
        className="caret-customOrange border border-gray-400 px-4 py-2 rounded"
        placeholder="Notice the customized caret color..."
      />
    </div>
  );
}

Using Arbitrary Values

Sometimes, quick, unconventional values are needed. Tailwind supports arbitrary value inputs to set caret colors directly in your components using brackets ([]).

Implementing Arbitrary Values:

This is a live editor. Play around with it!
export default function ArbitraryCaret() {
  return (
    <div className="h-screen w-screen bg-gray-50 flex justify-center items-center">
      <input
        type="text"
        className="caret-[#36c4c5] border border-gray-300 px-4 py-2 rounded"
        placeholder="Custom HEX color"
      />
    </div>
  );
}

Real World Examples

Dynamic Search Input with Active Caret Feedback

This example shows a search input that changes caret color based on search result availability.

This is a live editor. Play around with it!
export default function SearchProducts() {
  const products = [
    { id: 1, name: "Wireless Headphones", category: "Electronics", inStock: true },
    { id: 2, name: "Mechanical Keyboard", category: "Accessories", inStock: false },
    { id: 3, name: "Ultra HD Monitor", category: "Electronics", inStock: true },
    { id: 4, name: "Gaming Mouse", category: "Accessories", inStock: true },
    { id: 5, name: "USB-C Hub", category: "Electronics", inStock: false },
    { id: 6, name: "Laptop Stand", category: "Accessories", inStock: true }
  ];

  return (
    <div className="p-6 bg-gray-50">
      <input
        type="text"
        placeholder="Search products..."
        className="w-full p-3 border rounded-lg focus:outline-none caret-blue-500 focus:caret-green-500"
      />
      <div className="mt-4 grid grid-cols-1 gap-4">
        {products.map((product) => (
          <div key={product.id} className="p-4 bg-white rounded-lg shadow">
            <h3 className="font-semibold">{product.name}</h3>
            <p className="text-gray-600">{product.category}</p>
            <span className={`${product.inStock ? 'text-green-500' : 'text-red-500'}`}>
              {product.inStock ? 'In Stock' : 'Out of Stock'}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

Multi-language Text Editor

A text editor that changes caret color based on the selected language.

This is a live editor. Play around with it!
export default function MultiLanguageEditor() {
  const languages = [
    { id: 'en', name: 'English', caretColor: 'caret-blue-500' },
    { id: 'es', name: 'Spanish', caretColor: 'caret-red-500' },
    { id: 'fr', name: 'French', caretColor: 'caret-purple-500' },
    { id: 'de', name: 'German', caretColor: 'caret-green-500' },
    { id: 'it', name: 'Italian', caretColor: 'caret-yellow-500' },
    { id: 'pt', name: 'Portuguese', caretColor: 'caret-pink-500' }
  ];

  return (
    <div className="max-w-2xl mx-auto p-6">
      <div className="space-x-2 mb-4">
        {languages.map((lang) => (
          <button
            key={lang.id}
            className="px-3 py-1 rounded-full bg-gray-200 hover:bg-gray-300"
          >
            {lang.name}
          </button>
        ))}
      </div>
      <textarea
        className="w-full h-48 p-4 border rounded-lg resize-none focus:outline-none caret-blue-500"
        placeholder="Start typing..."
      ></textarea>
    </div>
  );
}

Smart Contact Form

A contact form with caret colors indicating field validation status.

This is a live editor. Play around with it!
export default function ContactForm() {
  const formFields = [
    { id: 'name', label: 'Full Name', type: 'text', required: true },
    { id: 'email', label: 'Email Address', type: 'email', required: true },
    { id: 'phone', label: 'Phone Number', type: 'tel', required: false },
    { id: 'company', label: 'Company Name', type: 'text', required: false },
    { id: 'subject', label: 'Subject', type: 'text', required: true },
    { id: 'message', label: 'Message', type: 'textarea', required: true }
  ];

  return (
    <form className="max-w-xl mx-auto p-8 bg-white shadow-lg rounded-xl">
      {formFields.map((field) => (
        <div key={field.id} className="mb-6">
          <label className="block text-sm font-medium mb-2">{field.label}</label>
          {field.type === 'textarea' ? (
            <textarea
              className="w-full p-3 border rounded focus:outline-none caret-indigo-500 focus:caret-green-500"
              required={field.required}
            />
          ) : (
            <input
              type={field.type}
              className="w-full p-3 border rounded focus:outline-none caret-indigo-500 focus:caret-green-500"
              required={field.required}
            />
          )}
        </div>
      ))}
      <button className="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700">
        Submit
      </button>
    </form>
  );
}

Code Editor Interface

A simplified code editor with syntax-aware caret colors.

This is a live editor. Play around with it!
export default function CodeEditor() {
  const codeSnippets = [
    { id: 1, language: 'JavaScript', color: 'caret-yellow-500' },
    { id: 2, language: 'Python', color: 'caret-blue-500' },
    { id: 3, language: 'Ruby', color: 'caret-red-500' },
    { id: 4, language: 'Java', color: 'caret-orange-500' },
    { id: 5, language: 'PHP', color: 'caret-purple-500' },
    { id: 6, language: 'Go', color: 'caret-cyan-500' }
  ];

  return (
    <div className="bg-gray-900 p-6 rounded-lg">
      <div className="flex space-x-4 mb-4">
        {codeSnippets.map((lang) => (
          <button
            key={lang.id}
            className="px-4 py-2 rounded bg-gray-800 text-gray-300 hover:bg-gray-700"
          >
            {lang.language}
          </button>
        ))}
      </div>
      <div className="bg-gray-800 p-4 rounded">
        <textarea
          className="w-full h-64 bg-transparent text-gray-300 font-mono resize-none focus:outline-none caret-yellow-500"
          placeholder="Write your code here..."
        ></textarea>
      </div>
    </div>
  );
}

Interactive Note Taking App

A note-taking interface with category-based caret colors.

This is a live editor. Play around with it!
export default function NoteTaking() {
  const notes = [
    { id: 1, title: 'Work Tasks', color: 'caret-red-500', icon: 'https://images.unsplash.com/photo-1611224923853-80b023f02d71' },
    { id: 2, title: 'Personal Goals', color: 'caret-blue-500', icon: 'https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b' },
    { id: 3, title: 'Shopping List', color: 'caret-green-500', icon: 'https://images.unsplash.com/photo-1472851294608-062f824d29cc' },
    { id: 4, title: 'Project Ideas', color: 'caret-purple-500', icon: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c' },
    { id: 5, title: 'Meeting Notes', color: 'caret-yellow-500', icon: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4' },
    { id: 6, title: 'Learning Topics', color: 'caret-pink-500', icon: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b' }
  ];

  return (
    <div className="grid grid-cols-2 gap-6 p-8">
      {notes.map((note) => (
        <div key={note.id} className="p-6 bg-white rounded-xl shadow-md">
          <div className="flex items-center mb-4">
            <img
              src={note.icon}
              alt={note.title}
              className="w-8 h-8 rounded-full mr-3"
            />
            <h3 className="font-semibold">{note.title}</h3>
          </div>
          <textarea
            className={`w-full h-32 p-3 border rounded resize-none focus:outline-none ${note.color}`}
            placeholder="Take your notes here..."
          ></textarea>
        </div>
      ))}
    </div>
  );
}

Customization Examples

Custom Brand Carets for Search Fields

This example demonstrates how to customize caret colors for search inputs to match your brand's color scheme.

This is a live editor. Play around with it!
// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function BrandedSearchField() {
  return (
    <div className="max-w-2xl mx-auto p-8 bg-gray-50 h-screen rounded-xl">
      <div className="space-y-6">
        <div className="relative">
          <input
            type="text"
            placeholder="Primary Search"
            className="w-full px-4 py-3 border border-gray-300 rounded-lg 
                       focus:outline-none focus:ring-2 focus:ring-pink-200 
                       caret-brand-primary text-lg"
          />
        </div>
      </div>
    </div>
  )
}

Dynamic Dark Mode Caret Colors

This example shows how to implement different caret colors based on dark/light mode preferences.

This is a live editor. Play around with it!
// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function DarkModeTextEditor() {
  return (
    <div className="min-h-screen dark:bg-gray-900 transition-colors duration-200">
      <div className="max-w-4xl mx-auto p-8">
        <textarea
          className="w-full h-64 p-6 rounded-xl bg-white dark:bg-gray-800 
                     border-2 border-gray-200 dark:border-gray-700
                     text-gray-800 dark:text-gray-200
                     caret-mode-light dark:caret-mode-dark
                     focus:outline-none focus:ring-2 focus:ring-blue-500
                     resize-none"
          placeholder="Start typing here..."
        />
        <div className="mt-4 flex justify-end">
          <button className="px-6 py-2 bg-blue-600 text-white rounded-lg
                            hover:bg-blue-700 transition-colors">
            Save Changes
          </button>
        </div>
      </div>
    </div>
  )
}

Gradient Caret Animation for Code Editor

This example showcases an animated gradient caret color for a code editor interface.

This is a live editor. Play around with it!
// App.js
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CodeEditor() {
  return (
    <div className="bg-[#1E1E1E] p-8 h-screen max-w-4xl">
      <div className="flex items-center justify-between mb-4">
        <div className="flex space-x-2">
          <div className="w-3 h-3 rounded-full bg-red-500"></div>
          <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
          <div className="w-3 h-3 rounded-full bg-green-500"></div>
        </div>
      </div>
      <div className="relative">
        <pre className="text-gray-300">
          <code className="font-mono">
            <textarea
              className="w-full caret-code bg-transparent border-none outline-none 
                         text-gray-300 font-mono p-4 resize-none"
              rows="10"
              placeholder="// Write your code here..."
            />
          </code>
        </pre>
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

To ensure your Caret Color implementations align with the overall design system, you should always use consistent color schemes across components. Map your caret colors to your chosen brand guidelines by extending the theme in tailwind.config.js. For example:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ConsistentCaretInput() {
  return (
    <div className="flex flex-col items-center space-y-4 p-8">
      <label className="text-gray-700 font-medium">Search:</label>
      <input 
        type="text" 
        className="caret-primary border border-gray-300 px-4 py-2 rounded-lg focus:outline-none focus:ring caret-primary"
        placeholder="Search your project..."
      />
    </div>
  );
}

Balance with Other Layout Properties

To create elegant interfaces, your Caret Color utilities should complement other Tailwind layout properties, such as borders, spacing, or flexbox utilities. For instance, in forms or multi-input designs, balancing caret visibility with padding, border styles, and alignment achieves polished layouts.

This is a live editor. Play around with it!
export default function AlignedInputs() {
  return (
    <form className="max-w-lg mx-auto space-y-6 p-6 bg-gray-50 h-screen rounded-lg shadow-md">
      <div className="flex items-center border-b border-gray-300">
        <label htmlFor="username" className="p-3 text-sm text-gray-700">Username</label>
        <input 
          type="text" 
          id="username" 
          className="flex-grow caret-red-500 text-base px-3 py-2 focus:outline-none"
          placeholder="Enter username..."
        />
      </div>
      <div className="flex items-center border-b border-gray-300">
        <label htmlFor="password" className="p-3 text-sm text-gray-700">Password</label>
        <input 
          type="password" 
          id="password" 
          className="flex-grow caret-red-500 text-base px-3 py-2 focus:outline-none"
          placeholder="Enter password..."
        />
      </div>
    </form>
  );
}

Accessibility Considerations

Enhance Readability and Navigability

Caret color significantly impacts readability and navigability in form elements, especially for users who rely on keyboard input or text editing applications. By enhancing the caret visibility using high-contrast colors (caret-lime-500 on a dark background or caret-gray-700 on light), users can easily locate cursor positions within input fields or text areas, thereby reducing input errors.

Accessible navigability also includes pairing caret color utilities with clear focus or hover visualizations, such as focus:caret-purple-500 alongside focus:ring-4 focus:ring-purple-300. These combinations guide users effectively during input, helping them understand which element is currently active and improving the overall navigational flow.

Focus on High Contrast

High contrast between the caret color and the background is crucial for visually impaired users. Tailwind CSS’s color utilities make it straightforward to achieve adequate contrast ratios in alignment with Web Content Accessibility Guidelines (WCAG). For instance, use lighter caret colors like caret-yellow-300 against dark fields or darker colors like caret-gray-800 on light fields to ensure visibility.

Too subtle or overly bold caret colors can hinder usability, especially for users with different visual perception abilities.

In scenarios where dynamic contrast requirements arise, such as switching dark/light UI modes, consider using conditional utilities like dark:caret-* alongside caret-*. These utilities ensure that your caret colors harmonize with the theme and adjust automatically when preferences change, maintaining optimal visibility.