快速参考

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

基本用法

设置描边颜色

使用 stroke-{color} 实用程序更改 SVG 的描边颜色。

<svg class="stroke-cyan-500 ...">
  <!-- ... -->
</svg>

这对于像 Heroicons 这样的图标集的样式设置很有用。


条件应用

悬停、焦点和其他状态

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

<svg class="stroke-cyan-500 hover:stroke-cyan-700">
  <!-- ... -->
</svg>

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

断点和媒体查询

您也可以使用变体修饰符来针对媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:stroke-cyan-700 仅在中等屏幕尺寸及以上应用 stroke-cyan-700 实用程序。

<svg class="stroke-cyan-500 md:stroke-cyan-700">
  <!-- ... -->
</svg>

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


使用自定义值

自定义您的主题

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

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

或者,您可以通过编辑 theme.stroketheme.extend.stroke 在您的 tailwind.config.js 文件中自定义您的描边颜色。

了解更多关于在主题定制文档中定制默认主题的信息。

任意值

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

<svg class="stroke-[#243c5a]">
  <!-- ... -->
</svg>

了解更多关于在任意值文档中使用任意值的支持。