SVG
用于设置 SVG 元素描边的实用程序。
类 | 属性 |
---|---|
stroke-none | stroke: none; |
stroke-inherit | stroke: inherit; |
stroke-current | stroke: currentColor; |
stroke-transparent | stroke: transparent; |
stroke-black | stroke: #000; |
stroke-white | stroke: #fff; |
stroke-slate-50 | stroke: #f8fafc; |
stroke-slate-100 | stroke: #f1f5f9; |
stroke-slate-200 | stroke: #e2e8f0; |
stroke-slate-300 | stroke: #cbd5e1; |
stroke-slate-400 | stroke: #94a3b8; |
stroke-slate-500 | stroke: #64748b; |
stroke-slate-600 | stroke: #475569; |
stroke-slate-700 | stroke: #334155; |
stroke-slate-800 | stroke: #1e293b; |
stroke-slate-900 | stroke: #0f172a; |
stroke-slate-950 | stroke: #020617; |
stroke-gray-50 | stroke: #f9fafb; |
stroke-gray-100 | stroke: #f3f4f6; |
stroke-gray-200 | stroke: #e5e7eb; |
stroke-gray-300 | stroke: #d1d5db; |
stroke-gray-400 | stroke: #9ca3af; |
stroke-gray-500 | stroke: #6b7280; |
stroke-gray-600 | stroke: #4b5563; |
stroke-gray-700 | stroke: #374151; |
stroke-gray-800 | stroke: #1f2937; |
stroke-gray-900 | stroke: #111827; |
stroke-gray-950 | stroke: #030712; |
stroke-zinc-50 | stroke: #fafafa; |
stroke-zinc-100 | stroke: #f4f4f5; |
stroke-zinc-200 | stroke: #e4e4e7; |
stroke-zinc-300 | stroke: #d4d4d8; |
stroke-zinc-400 | stroke: #a1a1aa; |
stroke-zinc-500 | stroke: #71717a; |
stroke-zinc-600 | stroke: #52525b; |
stroke-zinc-700 | stroke: #3f3f46; |
stroke-zinc-800 | stroke: #27272a; |
stroke-zinc-900 | stroke: #18181b; |
stroke-zinc-950 | stroke: #09090b; |
stroke-neutral-50 | stroke: #fafafa; |
stroke-neutral-100 | stroke: #f5f5f5; |
stroke-neutral-200 | stroke: #e5e5e5; |
stroke-neutral-300 | stroke: #d4d4d4; |
stroke-neutral-400 | stroke: #a3a3a3; |
stroke-neutral-500 | stroke: #737373; |
stroke-neutral-600 | stroke: #525252; |
stroke-neutral-700 | stroke: #404040; |
stroke-neutral-800 | stroke: #262626; |
stroke-neutral-900 | stroke: #171717; |
stroke-neutral-950 | stroke: #0a0a0a; |
stroke-stone-50 | stroke: #fafaf9; |
stroke-stone-100 | stroke: #f5f5f4; |
stroke-stone-200 | stroke: #e7e5e4; |
stroke-stone-300 | stroke: #d6d3d1; |
stroke-stone-400 | stroke: #a8a29e; |
stroke-stone-500 | stroke: #78716c; |
stroke-stone-600 | stroke: #57534e; |
stroke-stone-700 | stroke: #44403c; |
stroke-stone-800 | stroke: #292524; |
stroke-stone-900 | stroke: #1c1917; |
stroke-stone-950 | stroke: #0c0a09; |
stroke-red-50 | stroke: #fef2f2; |
stroke-red-100 | stroke: #fee2e2; |
stroke-red-200 | stroke: #fecaca; |
stroke-red-300 | stroke: #fca5a5; |
stroke-red-400 | stroke: #f87171; |
stroke-red-500 | stroke: #ef4444; |
stroke-red-600 | stroke: #dc2626; |
stroke-red-700 | stroke: #b91c1c; |
stroke-red-800 | stroke: #991b1b; |
stroke-red-900 | stroke: #7f1d1d; |
stroke-red-950 | stroke: #450a0a; |
stroke-orange-50 | stroke: #fff7ed; |
stroke-orange-100 | stroke: #ffedd5; |
stroke-orange-200 | stroke: #fed7aa; |
stroke-orange-300 | stroke: #fdba74; |
stroke-orange-400 | stroke: #fb923c; |
stroke-orange-500 | stroke: #f97316; |
stroke-orange-600 | stroke: #ea580c; |
stroke-orange-700 | stroke: #c2410c; |
stroke-orange-800 | stroke: #9a3412; |
stroke-orange-900 | stroke: #7c2d12; |
stroke-orange-950 | stroke: #431407; |
stroke-amber-50 | stroke: #fffbeb; |
stroke-amber-100 | stroke: #fef3c7; |
stroke-amber-200 | stroke: #fde68a; |
stroke-amber-300 | stroke: #fcd34d; |
stroke-amber-400 | stroke: #fbbf24; |
stroke-amber-500 | stroke: #f59e0b; |
stroke-amber-600 | stroke: #d97706; |
stroke-amber-700 | stroke: #b45309; |
stroke-amber-800 | stroke: #92400e; |
stroke-amber-900 | stroke: #78350f; |
stroke-amber-950 | stroke: #451a03; |
stroke-yellow-50 | stroke: #fefce8; |
stroke-yellow-100 | stroke: #fef9c3; |
stroke-yellow-200 | stroke: #fef08a; |
stroke-yellow-300 | stroke: #fde047; |
stroke-yellow-400 | stroke: #facc15; |
stroke-yellow-500 | stroke: #eab308; |
stroke-yellow-600 | stroke: #ca8a04; |
stroke-yellow-700 | stroke: #a16207; |
stroke-yellow-800 | stroke: #854d0e; |
stroke-yellow-900 | stroke: #713f12; |
stroke-yellow-950 | stroke: #422006; |
stroke-lime-50 | stroke: #f7fee7; |
stroke-lime-100 | stroke: #ecfccb; |
stroke-lime-200 | stroke: #d9f99d; |
stroke-lime-300 | stroke: #bef264; |
stroke-lime-400 | stroke: #a3e635; |
stroke-lime-500 | stroke: #84cc16; |
stroke-lime-600 | stroke: #65a30d; |
stroke-lime-700 | stroke: #4d7c0f; |
stroke-lime-800 | stroke: #3f6212; |
stroke-lime-900 | stroke: #365314; |
stroke-lime-950 | stroke: #1a2e05; |
stroke-green-50 | stroke: #f0fdf4; |
stroke-green-100 | stroke: #dcfce7; |
stroke-green-200 | stroke: #bbf7d0; |
stroke-green-300 | stroke: #86efac; |
stroke-green-400 | stroke: #4ade80; |
stroke-green-500 | stroke: #22c55e; |
stroke-green-600 | stroke: #16a34a; |
stroke-green-700 | stroke: #15803d; |
stroke-green-800 | stroke: #166534; |
stroke-green-900 | stroke: #14532d; |
stroke-green-950 | stroke: #052e16; |
stroke-emerald-50 | stroke: #ecfdf5; |
stroke-emerald-100 | stroke: #d1fae5; |
stroke-emerald-200 | stroke: #a7f3d0; |
stroke-emerald-300 | stroke: #6ee7b7; |
stroke-emerald-400 | stroke: #34d399; |
stroke-emerald-500 | stroke: #10b981; |
stroke-emerald-600 | stroke: #059669; |
stroke-emerald-700 | stroke: #047857; |
stroke-emerald-800 | stroke: #065f46; |
stroke-emerald-900 | stroke: #064e3b; |
stroke-emerald-950 | stroke: #022c22; |
stroke-teal-50 | stroke: #f0fdfa; |
stroke-teal-100 | stroke: #ccfbf1; |
stroke-teal-200 | stroke: #99f6e4; |
stroke-teal-300 | stroke: #5eead4; |
stroke-teal-400 | stroke: #2dd4bf; |
stroke-teal-500 | stroke: #14b8a6; |
stroke-teal-600 | stroke: #0d9488; |
stroke-teal-700 | stroke: #0f766e; |
stroke-teal-800 | stroke: #115e59; |
stroke-teal-900 | stroke: #134e4a; |
stroke-teal-950 | stroke: #042f2e; |
stroke-cyan-50 | stroke: #ecfeff; |
stroke-cyan-100 | stroke: #cffafe; |
stroke-cyan-200 | stroke: #a5f3fc; |
stroke-cyan-300 | stroke: #67e8f9; |
stroke-cyan-400 | stroke: #22d3ee; |
stroke-cyan-500 | stroke: #06b6d4; |
stroke-cyan-600 | stroke: #0891b2; |
stroke-cyan-700 | stroke: #0e7490; |
stroke-cyan-800 | stroke: #155e75; |
stroke-cyan-900 | stroke: #164e63; |
stroke-cyan-950 | stroke: #083344; |
stroke-sky-50 | stroke: #f0f9ff; |
stroke-sky-100 | stroke: #e0f2fe; |
stroke-sky-200 | stroke: #bae6fd; |
stroke-sky-300 | stroke: #7dd3fc; |
stroke-sky-400 | stroke: #38bdf8; |
stroke-sky-500 | stroke: #0ea5e9; |
stroke-sky-600 | stroke: #0284c7; |
stroke-sky-700 | stroke: #0369a1; |
stroke-sky-800 | stroke: #075985; |
stroke-sky-900 | stroke: #0c4a6e; |
stroke-sky-950 | stroke: #082f49; |
stroke-blue-50 | stroke: #eff6ff; |
stroke-blue-100 | stroke: #dbeafe; |
stroke-blue-200 | stroke: #bfdbfe; |
stroke-blue-300 | stroke: #93c5fd; |
stroke-blue-400 | stroke: #60a5fa; |
stroke-blue-500 | stroke: #3b82f6; |
stroke-blue-600 | stroke: #2563eb; |
stroke-blue-700 | stroke: #1d4ed8; |
stroke-blue-800 | stroke: #1e40af; |
stroke-blue-900 | stroke: #1e3a8a; |
stroke-blue-950 | stroke: #172554; |
stroke-indigo-50 | stroke: #eef2ff; |
stroke-indigo-100 | stroke: #e0e7ff; |
stroke-indigo-200 | stroke: #c7d2fe; |
stroke-indigo-300 | stroke: #a5b4fc; |
stroke-indigo-400 | stroke: #818cf8; |
stroke-indigo-500 | stroke: #6366f1; |
stroke-indigo-600 | stroke: #4f46e5; |
stroke-indigo-700 | stroke: #4338ca; |
stroke-靛蓝-800 | stroke: #3730a3; |
stroke-靛蓝-900 | stroke: #312e81; |
stroke-靛蓝-950 | stroke: #1e1b4b; |
stroke-紫罗兰-50 | stroke: #f5f3ff; |
stroke-紫罗兰-100 | stroke: #ede9fe; |
stroke-紫罗兰-200 | stroke: #ddd6fe; |
stroke-紫罗兰-300 | stroke: #c4b5fd; |
stroke-紫罗兰-400 | stroke: #a78bfa; |
stroke-紫罗兰-500 | stroke: #8b5cf6; |
stroke-紫罗兰-600 | stroke: #7c3aed; |
stroke-紫罗兰-700 | stroke: #6d28d9; |
stroke-紫罗兰-800 | stroke: #5b21b6; |
stroke-紫罗兰-900 | stroke: #4c1d95; |
stroke-紫罗兰-950 | stroke: #2e1065; |
stroke-紫色-50 | stroke: #faf5ff; |
stroke-紫色-100 | stroke: #f3e8ff; |
stroke-紫色-200 | stroke: #e9d5ff; |
stroke-紫色-300 | stroke: #d8b4fe; |
stroke-紫色-400 | stroke: #c084fc; |
stroke-紫色-500 | stroke: #a855f7; |
stroke-紫色-600 | stroke: #9333ea; |
stroke-紫色-700 | stroke: #7e22ce; |
stroke-紫色-800 | stroke: #6b21a8; |
stroke-紫色-900 | stroke: #581c87; |
stroke-紫色-950 | stroke: #3b0764; |
stroke-紫红色-50 | stroke: #fdf4ff; |
stroke-紫红色-100 | stroke: #fae8ff; |
stroke-紫红色-200 | stroke: #f5d0fe; |
stroke-紫红色-300 | stroke: #f0abfc; |
stroke-紫红色-400 | stroke: #e879f9; |
stroke-紫红色-500 | stroke: #d946ef; |
stroke-紫红色-600 | stroke: #c026d3; |
stroke-紫红色-700 | stroke: #a21caf; |
stroke-紫红色-800 | stroke: #86198f; |
stroke-紫红色-900 | stroke: #701a75; |
stroke-紫红色-950 | stroke: #4a044e; |
stroke-粉色-50 | stroke: #fdf2f8; |
stroke-粉色-100 | stroke: #fce7f3; |
stroke-粉色-200 | stroke: #fbcfe8; |
stroke-粉色-300 | stroke: #f9a8d4; |
stroke-粉色-400 | stroke: #f472b6; |
stroke-粉色-500 | stroke: #ec4899; |
stroke-粉色-600 | stroke: #db2777; |
stroke-粉色-700 | stroke: #be185d; |
stroke-粉色-800 | stroke: #9d174d; |
stroke-粉色-900 | stroke: #831843; |
stroke-粉色-950 | stroke: #500724; |
stroke-玫瑰色-50 | stroke: #fff1f2; |
stroke-玫瑰色-100 | stroke: #ffe4e6; |
stroke-rose-200 | stroke: #fecdd3; |
stroke-rose-300 | stroke: #fda4af; |
stroke-rose-400 | stroke: #fb7185; |
stroke-rose-500 | stroke: #f43f5e; |
stroke-rose-600 | stroke: #e11d48; |
stroke-rose-700 | stroke: #be123c; |
stroke-rose-800 | stroke: #9f1239; |
stroke-rose-900 | stroke: #881337; |
stroke-rose-950 | stroke: #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.colors
或 theme.extend.colors
在您的 tailwind.config.js
文件中 自定义您的颜色调色板。
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
},
}
}
}
或者,您可以通过编辑 theme.stroke
或 theme.extend.stroke
在您的 tailwind.config.js
文件中自定义您的描边颜色。
了解更多关于在主题定制文档中定制默认主题的信息。
如果您需要使用一次性的stroke
值,而该值不适合包含在您的主题中,请使用方括号使用任何任意值动态生成属性。
<svg class="stroke-[#243c5a]">
<!-- ... -->
</svg>
了解更多关于在任意值文档中使用任意值的支持。