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>

列印頁面