Tailwind CSS - SVG Stroke
Tailwind CSS SVG Stroke 实用类，用于为 SVG 元素添加描边颜色。描边颜色种类繁多，每种颜色的深浅度都可用于为 SVG 元素添加描边。
Tailwind CSS SVG Stroke 类
以下是 Tailwind CSS SVG Stroke 类列表，这些类提供了一种有效处理 SVG 元素描边的方法。
| 类 | CSS 属性 |
|---|---|
| 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-indigo-800 | stroke: #3730a3; |
| stroke-indigo-900 | stroke: #312e81; |
| stroke-indigo-950 | stroke: #1e1b4b; |
| stroke-violet-50 | stroke: #f5f3ff; |
| stroke-violet-100 | stroke: #ede9fe; |
| stroke-violet-200 | stroke: #ddd6fe; |
| stroke-violet-300 | stroke: #c4b5fd; |
| stroke-violet-400 | stroke: #a78bfa; |
| stroke-violet-500 | stroke: #8b5cf6; |
| stroke-violet-600 | stroke: #7c3aed; |
| stroke-violet-700 | stroke: #6d28d9; |
| stroke-violet-800 | stroke: #5b21b6; |
| stroke-violet-900 | stroke: #4c1d95; |
| stroke-violet-950 | stroke: #2e1065; |
| stroke-purple-50 | stroke: #faf5ff; |
| stroke-purple-100 | stroke: #f3e8ff; |
| stroke-purple-200 | stroke: #e9d5ff; |
| stroke-purple-300 | stroke: #d8b4fe; |
| stroke-purple-400 | stroke: #c084fc; |
| stroke-purple-500 | stroke: #a855f7; |
| stroke-purple-600 | stroke: #9333ea; |
| stroke-purple-700 | stroke: #7e22ce; |
| stroke-purple-800 | stroke: #6b21a8; |
| stroke-purple-900 | stroke: #581c87; |
| stroke-purple-950 | stroke: #3b0764; |
| stroke-fuchsia-50 | stroke: #fdf4ff; |
| stroke-fuchsia-100 | stroke: #fae8ff; |
| stroke-fuchsia-200 | stroke: #f5d0fe; |
| stroke-fuchsia-300 | stroke: #f0abfc; |
| stroke-fuchsia-400 | stroke: #e879f9; |
| stroke-fuchsia-500 | stroke: #d946ef; |
| stroke-fuchsia-600 | stroke: #c026d3; |
| stroke-fuchsia-700 | stroke: #a21caf; |
| stroke-fuchsia-800 | stroke: #86198f; |
| stroke-fuchsia-900 | stroke: #701a75; |
| stroke-fuchsia-950 | stroke: #4a044e; |
| stroke-pink-50 | stroke: #fdf2f8; |
| stroke-pink-100 | stroke: #fce7f3; |
| stroke-pink-200 | stroke: #fbcfe8; |
| stroke-pink-300 | stroke: #f9a8d4; |
| stroke-pink-400 | stroke: #f472b6; |
| stroke-pink-500 | stroke: #ec4899; |
| stroke-pink-600 | stroke: #db2777; |
| stroke-pink-700 | stroke: #be185d; |
| stroke-pink-800 | stroke: #9d174d; |
| stroke-pink-900 | stroke: #831843; |
| stroke-pink-950 | stroke: #500724; |
| stroke-rose-50 | stroke: #fff1f2; |
| stroke-rose-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; |
Tailwind CSS SVG 描边类的功能
- stroke-none:此类不设置 SVG。
- stroke-inherit:此类设置 SVG 中从父级继承的颜色。
- stroke-current:此类设置 SVG 中的当前颜色。
- stroke-transparent:此类设置 SVG 中的透明颜色。
- stroke-black:此类设置 SVG 中的黑色。
- stroke-white:此类设置 SVG 中的白色。
- stroke-slate-*:此类设置 SVG 中的石板色SVG。
- stroke-gray-*:此类在 SVG 中设置灰色。
- stroke-zinc-*:此类在 SVG 中设置锌色。
- stroke-neutral-*:此类在 SVG 中设置中性色。
- stroke-stone-*:此类在 SVG 中设置石头颜色。
- stroke-red-*:此类在 SVG 中设置红色。
- stroke-orange-*:此类在 SVG 中设置橙色。
- stroke-amber-*:此类在 SVG 中设置琥珀色。
- stroke-yellow-*:此类设置SVG 中的黄色。
- stroke-lime-*:此类用于设置 SVG 中的黄绿色。
- stroke-green-*:此类用于设置 SVG 中的绿色。
- stroke-emerald-*:此类用于设置 SVG 中的祖母绿色。
- stroke-teal-*:此类用于设置 SVG 中的青绿色。
- stroke-cyan-*:此类用于设置 SVG 中的青绿色。
- stroke-sky-*:此类用于设置 SVG 中的天空颜色。
- stroke-blue-*:此类用于设置SVG。
- stroke-indigo-*:此类在 SVG 中设置靛蓝色。
- stroke-violet-*:此类在 SVG 中设置紫罗兰色。
- stroke-purple-*:此类在 SVG 中设置紫色。
- stroke-fuchsia-*:此类在 SVG 中设置紫红色。
- stroke-pink-*:此类在 SVG 中设置粉红色。
- stroke-rose-*:此类在 SVG 中设置玫瑰色。
注意: * 可以替换为 50、100、200， 300、400、500、600、700、800、900 和 950 分别代表上述颜色的不同色调。
Tailwind CSS SVG 描边类示例
以下示例将说明 Tailwind CSS SVG 描边类的实用功能。
设置 SVG 描边颜色
在本例中，我们将创建两个 SVG 元素，并使用 Tailwind CSS SVG 描边颜色类为它们应用描边颜色。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS SVG Stroke Color Class
</h2>
<p class="mt-4 text-lg">Bell SVG stroke-green-500 Class</p>
<svg class="fill-transparent stroke-green-500 h-12"
viewBox="0 0 46 48"
xmlns="http://www.w3.org/2000/svg">
<path stroke-rule="evenodd"
clip-rule="evenodd"
d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017
19V32.5335C4.00017 32.8383 3.9145 3.1371
3.75292 33.3956L0.912672 37.94C0.0801118
39.2721 1.0378 41 2.60867 41H4.3917C44.9625
41 45.9202 39.2721 45.0877 37.94L42.2474
33.3956C42.0858 33.1371 4.0002 32.8383 42.0002
32.5335V19C42.0002 8.50659 33.4936 0 23.0002
0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002
43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
</path>
</svg>
<p class="mt-4 text-lg">Bell SVG stroke-blue-500 Class</p>
<svg class="fill-transparent stroke-blue-500 h-12"
viewBox="0 0 46 48"
xmlns="http://www.w3.org/2000/svg">
<path stroke-rule="evenodd"
clip-rule="evenodd"
d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017
19V32.5335C4.00017 32.8383 3.9145 3.1371
3.75292 33.3956L0.912672 37.94C0.0801118
39.2721 1.0378 41 2.60867 41H4.3917C44.9625
41 45.9202 39.2721 45.0877 37.94L42.2474
33.3956C42.0858 33.1371 4.0002 32.8383 42.0002
32.5335V19C42.0002 8.50659 33.4936 0 23.0002
0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002
43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
</path>
</svg>
</body>
</html>
条件式 SVG 描边颜色
在下面的示例中，我们将创建一个 SVG 元素，并设置一个条件，使其鼠标悬停时描边颜色发生变化。通常情况下，SVG 元素会以特定颜色的较浅色调描边，而鼠标悬停时，描边颜色会变深。在下面的示例中，我们将创建一个 SVG 元素，并设置一个条件，使其鼠标悬停时描边颜色发生变化。通常情况下，SVG 元素会以特定颜色的较浅色调描边，而鼠标悬停时，描边颜色会变深。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS SVG Stroke Color Class
</h2>
<p class="mt-4 text-lg">Hover Over the Bell</p>
<svg class="fill-transparent stroke-green-600
hover:stroke-green-900 h-12"
viewBox="0 0 46 48"
xmlns="http://www.w3.org/2000/svg">
<path stroke-rule="evenodd"
clip-rule="evenodd"
d="M23.0002 0C12.5068 0 4.00017 8.50659 4.00017
19V32.5335C4.00017 32.8383 3.9145 3.1371
3.75292 33.3956L0.912672 37.94C0.0801118
39.2721 1.0378 41 2.60867 41H4.3917C44.9625
41 45.9202 39.2721 45.0877 37.94L42.2474
33.3956C42.0858 33.1371 4.0002 32.8383 42.0002
32.5335V19C42.0002 8.50659 33.4936 0 23.0002
0ZM23.000248C20.2388 48 18.0002 45.7614 18.0002
43H28.0002C28.0002 45.7614 25.7616 48 2.0002 48Z">
</path>
</svg>
</body>
</html>
