Tailwind CSS - 强调色

Tailwind CSS **强调色**是一组预定义的类，用于将各种颜色应用于网页上的元素。这些颜色有助于突出设计的重要部分，例如按钮、链接和边框。

Tailwind CSS 强调色类

以下是 Tailwind CSS 强调色类和属性列表，方便您将颜色应用于元素。

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

Tailwind CSS 强调色类功能

accent-inherit: 使用父元素的强调色。
accent-current: 将元素的当前颜色应用为强调色。
accent-transparent: 使强调色完全透明。
accent-black: 将强调色设置为黑色。
accent-white: 将强调色设置为白色。
accent-slate-*: 应用各种深灰色的色调作为强调色。
accent-gray-*: 应用各种灰色的色调作为强调色。
accent-zinc-*: 应用各种锌灰色的色调作为强调色。
accent-neutral-*: 应用各种中性色调作为强调色。
accent-stone-*: 应用各种石灰色的色调作为强调色。
accent-red-*: 应用各种深浅的红色作为高亮颜色。
accent-orange-*: 应用各种深浅的橙色作为高亮颜色。
accent-amber-*: 应用各种深浅的琥珀色作为高亮颜色。
accent-yellow-*: 应用各种深浅的黄色作为高亮颜色。
accent-lime-*: 应用各种深浅的青柠色作为高亮颜色。
accent-green-*: 应用各种深浅的绿色作为高亮颜色。
accent-emerald-*: 应用各种深浅的祖母绿作为高亮颜色。
accent-teal-*: 应用各种深浅的蓝绿色作为高亮颜色。
accent-cyan-*: 应用各种深浅的青色作为高亮颜色。
accent-sky-*: 应用各种深浅的天蓝色作为高亮颜色。
accent-blue-*: 应用各种深浅的蓝色作为高亮颜色。
accent-indigo-*: 应用各种深浅的靛蓝色作为高亮颜色。
accent-violet-*: 应用各种深浅的紫罗兰色作为高亮颜色。
accent-purple-*: 应用各种深浅的紫色作为高亮颜色。
accent-fuchsia-*: 应用各种深浅的紫红色作为高亮颜色。
accent-pink-*: 应用各种深浅的粉色作为高亮颜色。
accent-rose-*: 应用各种深浅的玫瑰色作为高亮颜色。

注意：在 'accent-color-*' 中，'*' 可以替换为 **50** 到 **950** 之间的数值，其中 **50** 是最浅的色调，**950** 是最深的色调。

Tailwind CSS 强调色类示例

以下是 Tailwind CSS 强调色类的示例，展示如何将不同的颜色应用于文本强调。每个示例都使用特定的类来创建各种视觉效果。

应用强调色类

Tailwind CSS 的 accent-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 Accent Color
    </h2>
    <label class="block mb-2">Default Radio Button</label>
    <label class="mb-4 space-x-2 flex">
        <input type="radio" name="option">
        <span>Default</span>
    </label>
    <label class="block mb-2">Accent Radio Buttons</label>
    <label class="flex space-x-2 mb-4">
        <input type="radio" name="option" 
              class="accent-blue-500" checked>
        <span>Blue Accent</span>
    </label>
    <label class="flex items-center space-x-2">
        <input type="radio" name="option" 
              class="accent-green-500">
        <span>Green Accent</span>
    </label>
</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 Accent Color
    </h2>
    <label class="block mb-2 mt-6">
        Default Range Input
    </label>
    <input type="range" class="w-full">
 
    <label class="block mb-2 mt-6">
        Accent Range Input
    </label>
    <input type="range" class="accent-teal-600 w-full">
</body>

</html>

使用不同不透明度的强调颜色

此示例演示了如何使用 Tailwind CSS 强调色类将不同深浅的靛蓝色和不同不透明度应用于范围输入。尝试使用 accent-color-* 类来查看其他颜色选项。

示例

<!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 Accent Color
    </h2>
    <h3 class="font-bold mb-4 underline">
        Range Input with Different Indigo Shades
    </h3>
    <label class="block mb-4">
        <input type="range" class="accent-indigo-900 w-full">
        Dark Indigo Range Input
    </label>
    
    <label class="block mb-4">
        <input type="range" class="accent-indigo-700 w-full">
        Medium Dark Indigo Range Input
    </label>
    
    <label class="block mb-4">
        <input type="range" class="accent-indigo-500 w-full">
        Medium Indigo Range Input
    </label>
    
    <label class="block mb-4">
        <input type="range" class="accent-indigo-400 w-full"> 
        Light Indigo Range Input
    </label>
    <label>
        <input type="range" class="accent-indigo-300 w-full">
        Very Light Indigo Range Input
    </label>
</body>

</html>

打印页面