快速参考

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

基本用法

设置轮廓颜色

使用 outline-{color} 实用程序更改元素轮廓的颜色。

outline-blue-500

outline-cyan-500

outline-pink-500

<button class="outline outline-offset-2 outline-blue-500 ...">Button A</button>
<button class="outline outline-offset-2 outline-cyan-500 ...">Button B</button>
<button class="outline outline-offset-2 outline-pink-500 ...">Button C</button>

更改不透明度

使用颜色不透明度修饰符控制元素轮廓颜色的不透明度。

outline-blue-500/50

<button class="outline-2 outline-blue-500/50 ...">Save Changes</button>

您可以使用在您的 不透明度比例 中定义的任何值,或者在需要偏离设计令牌时使用任意值。

<button class="outline-4 outline-pink-400/[.55] ..."></button>

条件应用

悬停、聚焦和其他状态

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

<button class="outline hover:outline-blue-400">
  <!-- ... -->
</button>

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

断点和媒体查询

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

<button class="outline md:outline-blue-400">
  <!-- ... -->
</button>

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


使用自定义值

自定义主题

默认情况下,Tailwind 使整个 默认颜色调色板 可用作轮廓颜色。您可以通过编辑 tailwind.config.js 文件中的 theme.colorstheme.extend.colors自定义颜色调色板

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

或者,您可以通过编辑 tailwind.config.js 文件中的 theme.outlineColortheme.extend.outlineColor 来仅自定义轮廓颜色。

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

任意值

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

<button class="outline-[#243c5a]">
  <!-- ... -->
</button>

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