Tailwind CSS - 光标颜色

Tailwind CSS **光标颜色** 是一个预定义类集合，允许您更改文本输入光标的颜色，也称为闪烁光标。

Tailwind CSS 光标颜色类

下面是 Tailwind CSS 光标颜色类列表，用于将不同的颜色应用于文本光标，帮助其适应您的设计。

类	CSS 属性
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	光标颜色：#ffedd5;
caret-orange-200	光标颜色：#fed7aa;
caret-orange-300	光标颜色：#fdba74;
caret-orange-400	光标颜色：#fb923c;
caret-orange-500	光标颜色：#f97316;
caret-orange-600	光标颜色：#ea580c;
caret-orange-700	光标颜色：#c2410c;
caret-orange-800	光标颜色：#9a3412;
caret-orange-900	光标颜色：#7c2d12;
caret-orange-950	光标颜色：#431407;
caret-amber-50	光标颜色：#fffbeb;
caret-amber-100	光标颜色：#fef3c7;
caret-amber-200	光标颜色：#fde68a;
caret-amber-300	光标颜色：#fcd34d;
caret-amber-400	光标颜色：#fbbf24;
caret-amber-500	光标颜色：#f59e0b;
caret-amber-600	光标颜色：#d97706;
caret-amber-700	光标颜色：#b45309;
caret-amber-800	光标颜色：#92400e;
caret-amber-900	光标颜色：#78350f;
caret-amber-950	光标颜色：#451a03;
caret-yellow-50	光标颜色：#fefce8;
caret-yellow-100	光标颜色：#fef9c3;
caret-yellow-200	光标颜色：#fef08a;
caret-yellow-300	光标颜色：#fde047;
caret-yellow-400	光标颜色：#facc15;
caret-yellow-500	光标颜色：#eab308;
caret-yellow-600	光标颜色：#ca8a04;
caret-yellow-700	光标颜色：#a16207;
caret-yellow-800	光标颜色：#854d0e;
caret-yellow-900	光标颜色：#713f12;
caret-yellow-950	光标颜色：#422006;
caret-lime-50	光标颜色：#f7fee7;
caret-lime-100	光标颜色：#ecfccb;
caret-lime-200	光标颜色：#d9f99d;
caret-lime-300	光标颜色：#bef264;
caret-lime-400	光标颜色：#a3e635;
caret-lime-500	光标颜色：#84cc16;
caret-lime-600	光标颜色：#65a30d;
caret-lime-700	光标颜色：#4d7c0f;
caret-lime-800	光标颜色：#3f6212;
caret-lime-900	光标颜色：#365314;
caret-lime-950	光标颜色：#1a2e05;
caret-green-50	光标颜色：#f0fdf4;
caret-green-100	光标颜色：#dcfce7;
caret-green-200	光标颜色：#bbf7d0;
caret-green-300	光标颜色：#86efac;
caret-green-400	光标颜色：#4ade80;
caret-green-500	光标颜色：#22c55e;
caret-green-600	光标颜色：#16a34a;
caret-green-700	光标颜色：#15803d;
caret-green-800	光标颜色：#166534;
caret-green-900	光标颜色：#14532d;
caret-green-950	光标颜色：#052e16;
caret-emerald-50	光标颜色：#ecfdf5;
caret-emerald-100	光标颜色：#d1fae5;
caret-emerald-200	光标颜色：#a7f3d0;
caret-emerald-300	光标颜色：#6ee7b7;
caret-emerald-400	光标颜色：#34d399;
caret-emerald-500	光标颜色：#10b981;
caret-emerald-600	光标颜色：#059669;
caret-emerald-700	光标颜色：#047857;
caret-emerald-800	光标颜色：#065f46;
caret-emerald-900	光标颜色：#064e3b;
caret-emerald-950	光标颜色：#022c22;
caret-teal-50	光标颜色：#f0fdfa;
caret-teal-100	光标颜色：#ccfbf1;
caret-teal-200	光标颜色：#99f6e4;
caret-teal-300	光标颜色：#5eead4;
caret-teal-400	光标颜色：#2dd4bf;
caret-teal-500	光标颜色：#14b8a6;
caret-teal-600	光标颜色：#0d9488;
caret-teal-700	光标颜色：#0f766e;
caret-teal-800	光标颜色：#115e59;
caret-teal-900	光标颜色：#134e4a;
caret-teal-950	光标颜色：#042f2e;
caret-cyan-50	光标颜色：#ecfeff;
caret-cyan-100	光标颜色：#cffafe;
caret-cyan-200	光标颜色：#a5f3fc;
caret-cyan-300	光标颜色：#67e8f9;
caret-cyan-400	光标颜色：#22d3ee;
caret-cyan-500	光标颜色：#06b6d4;
caret-cyan-600	光标颜色：#0891b2;
caret-cyan-700	光标颜色：#0e7490;
caret-cyan-800	光标颜色：#155e75;
caret-cyan-900	光标颜色：#164e63;
caret-cyan-950	光标颜色：#083344;
caret-sky-50	光标颜色：#f0f9ff;
caret-sky-100	光标颜色：#e0f2fe;
caret-sky-200	光标颜色：#bae6fd;
caret-sky-300	光标颜色：#7dd3fc;
caret-sky-400	光标颜色：#38bdf8;
caret-sky-500	光标颜色：#0ea5e9;
caret-sky-600	光标颜色：#0284c7;
caret-sky-700	光标颜色：#0369a1;
caret-sky-800	光标颜色：#075985;
caret-sky-900	光标颜色：#0c4a6e;
caret-sky-950	光标颜色：#082f49;
caret-blue-50	光标颜色：#eff6ff;
caret-blue-100	光标颜色：#dbeafe;
caret-blue-200	光标颜色：#bfdbfe;
caret-blue-300	光标颜色：#93c5fd;
caret-blue-400	光标颜色：#60a5fa;
caret-blue-500	光标颜色：#3b82f6;
caret-blue-600	光标颜色：#2563eb;
caret-blue-700	光标颜色：#1d4ed8;
caret-blue-800	光标颜色：#1e40af;
caret-blue-900	光标颜色：#1e3a8a;
caret-blue-950	光标颜色：#172554;
caret-indigo-50	光标颜色：#eef2ff;
caret-indigo-100	光标颜色：#e0e7ff;
caret-indigo-200	光标颜色：#c7d2fe;
caret-indigo-300	光标颜色：#a5b4fc;
caret-indigo-400	光标颜色：#818cf8;
caret-indigo-500	光标颜色：#6366f1;
caret-indigo-600	光标颜色：#4f46e5;
caret-indigo-700	光标颜色：#4338ca;
caret-indigo-800	光标颜色：#3730a3;
caret-indigo-900	光标颜色：#312e81;
caret-indigo-950	光标颜色：#1e1b4b;
caret-violet-50	光标颜色：#f5f3ff;
caret-violet-100	光标颜色：#ede9fe;
caret-violet-200	光标颜色：#ddd6fe;
caret-violet-300	光标颜色：#c4b5fd;
caret-violet-400	光标颜色：#a78bfa;
caret-violet-500	光标颜色：#8b5cf6;
caret-violet-600	光标颜色：#7c3aed;
caret-violet-700	光标颜色：#6d28d9;
caret-violet-800	光标颜色：#5b21b6;
caret-violet-900	光标颜色：#4c1d95;
caret-violet-950	光标颜色：#2e1065;
caret-purple-50	光标颜色：#faf5ff;
caret-purple-100	光标颜色：#f3e8ff;
caret-purple-200	光标颜色：#e9d5ff;
caret-purple-300	光标颜色：#d8b4fe;
caret-purple-400	光标颜色：#c084fc;
caret-purple-500	光标颜色：#a855f7;
caret-purple-600	光标颜色：#9333ea;
caret-purple-700	光标颜色：#7e22ce;
caret-purple-800	光标颜色：#6b21a8;
caret-purple-900	光标颜色：#581c87;
caret-purple-950	光标颜色：#3b0764;
caret-fuchsia-50	光标颜色：#fdf4ff;
caret-fuchsia-100	光标颜色：#fae8ff;
caret-fuchsia-200	光标颜色：#f5d0fe;
caret-fuchsia-300	光标颜色：#f0abfc;
caret-fuchsia-400	光标颜色：#e879f9;
caret-fuchsia-500	光标颜色：#d946ef;
caret-fuchsia-600	光标颜色：#c026d3;
caret-fuchsia-700	光标颜色：#a21caf;
caret-fuchsia-800	光标颜色：#86198f;
caret-fuchsia-900	光标颜色：#701a75;
caret-fuchsia-950	光标颜色：#4a044e;
caret-pink-50	光标颜色：#fdf2f8;
caret-pink-100	光标颜色：#fce7f3;
caret-pink-200	光标颜色：#fbcfe8;
caret-pink-300	光标颜色：#f9a8d4;
caret-pink-400	光标颜色：#f472b6;
caret-pink-500	光标颜色：#ec4899;
caret-pink-600	光标颜色：#db2777;
caret-pink-700	光标颜色：#be185d;
caret-pink-800	光标颜色：#9d174d;
caret-pink-900	光标颜色：#831843;
caret-pink-950	光标颜色：#500724;
caret-rose-50	光标颜色：#fff1f2;
caret-rose-100	光标颜色：#ffe4e6;
caret-rose-200	光标颜色：#fecdd3;
caret-rose-300	光标颜色：#fda4af;
caret-rose-400	光标颜色：#fb7185;
caret-rose-500	光标颜色：#f43f5e;
caret-rose-600	光标颜色：#e11d48;
caret-rose-700	光标颜色：#be123c;
caret-rose-800	光标颜色：#9f1239;
caret-rose-900	光标颜色：#881337;
caret-rose-950	光标颜色：#4c0519;

Tailwind CSS 光标颜色类的功能

caret-inherit：将父元素的文本颜色应用于光标。
caret-current：将元素当前的文本颜色应用于光标。
caret-transparent：将完全透明的颜色应用于光标。
caret-black：将黑色应用于光标。
caret-white：将白色应用于光标。
caret-slate-*：将各种深灰色的色调应用于光标。
caret-gray-*：将各种灰色的色调应用于光标。
caret-zinc-*：将各种锌灰色的色调应用于光标。
caret-neutral-*：将各种中性色调应用于光标。
caret-stone-*：将各种石灰色的色调应用于光标。
caret-red-*：将各种红色的色调应用于光标。
caret-orange-*：将各种橙色的色调应用于光标。
caret-amber-*：将各种琥珀色的色调应用于光标。
caret-yellow-*：将各种黄色的色调应用于光标。
caret-lime-*：将各种酸橙色的色调应用于光标。
caret-green-*：将各种绿色的色调应用于光标。
caret-emerald-*：将各种祖母绿色的色调应用于光标。
caret-teal-*：将各种蓝绿色的色调应用于光标。
caret-cyan-*：将各种青绿色的色调应用于光标。
caret-sky-*：将各种天蓝色的色调应用于光标。
caret-blue-*：将各种蓝色的色调应用于光标。
caret-indigo-*：将各种靛蓝色的色调应用于光标。
caret-violet-*：将各种紫罗兰色的色调应用于光标。
caret-purple-*：将各种紫色的色调应用于光标。
caret-fuchsia-*：将各种紫红色的色调应用于光标。
caret-pink-*：将各种粉红色的色调应用于光标。
caret-rose-*：将各种玫瑰色的色调应用于光标。

注意： 在“caret-color-*”中，“*” 可以替换为从 50（最浅）到 950（最深）的值，以表示不同的阴影。

Tailwind CSS 光标颜色类示例

以下是 Tailwind CSS 光标颜色类的示例，展示了如何为文本输入光标应用不同的颜色，以提高其可见性或与您的设计相匹配。

应用光标颜色类

Tailwind CSS 的 caret-color-* 类允许您轻松地为文本输入光标应用不同的颜色和阴影。每个类都组合了一个颜色名称（例如，“red”、“blue”等）和一个数值（例如，“300”、“400”、“500”），以指示从浅到深的阴影强度。

此示例展示了 Tailwind CSS 光标颜色类如何通过应用不同的阴影来更改输入字段中文本光标的颜色。

示例

  
<!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>

使用悬停效果应用光标颜色

此示例展示了如何使用 Tailwind CSS 光标颜色类来更改输入字段中文本光标（插入点）的颜色。它包含光标的不同颜色，并展示了这些颜色如何在悬停和聚焦时发生变化。

示例

<!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>

打印页面