快速参考

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

基本用法

设置强调色

使用 accent-{color} 实用程序更改元素的强调色。这对于通过覆盖浏览器默认颜色来设置复选框和单选按钮组等元素的样式很有用。

<label>
  <input type="checkbox" checked> Browser default
</label>
<label>
  <input type="checkbox" class="accent-pink-500" checked> Customized
</label>

更改不透明度

虽然可以使用颜色不透明度修饰符控制强调色的不透明度,但目前只有 Firefox 支持 rgba() alpha 值(上次测试时间为 2021 年 11 月)

<input type="checkbox" class="accent-emerald-500/25" checked> Emerald

条件应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:accent-pink-500 仅在悬停时应用 accent-pink-500 实用程序。

<input type="checkbox" class="accent-pink-300 focus:accent-pink-500" checked>

请注意,虽然可以使用 hoveractive 修饰符设置强调色,但结果颜色会略微不同于您设置的颜色,因为浏览器会自动调整这两个状态的强调色亮度。

有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其他状态 文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、prefers-reduced-motion 等等。例如,使用 md:accent-pink-500 仅在中等屏幕尺寸及以上应用 accent-pink-500 实用程序。

<input type="checkbox" class="accent-pink-300 md:accent-pink-500" checked>

要了解更多信息,请查看有关 响应式设计暗模式其他媒体查询修饰符 的文档。


使用自定义值

自定义主题

默认情况下,Tailwind 会将整个 默认颜色调色板 作为强调色提供。您可以通过编辑 tailwind.config.js 文件中的 theme.colorstheme.extend.colors自定义颜色调色板

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

或者,您也可以通过编辑 tailwind.config.js 文件中的 theme.accentColortheme.extend.accentColor 来自定义强调色。

主题自定义 文档中了解有关自定义默认主题的更多信息。

任意值

如果您需要使用一个不适合包含在主题中的 accent-color 值,请使用方括号使用任何任意值动态生成属性。

<input type="checkbox" class="accent-[#50d71e]" checked>

任意值 文档中了解有关任意值支持的更多信息。