Tailwind CSS - SVG 描邊

Tailwind CSS SVG 描邊實用程式類用於為 SVG 元素設定描邊顏色。可以有許多描邊顏色和每種顏色的色調來為 SVG 元素描邊。

Tailwind CSS SVG 描邊類

以下是提供有效方法來處理 SVG 元素描邊的Tailwind CSS 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 類功能

stroke-none: 此類不設定 SVG 的描邊。
stroke-inherit: 此類從父元素繼承 SVG 的顏色。
stroke-current: 此類設定 SVG 的當前顏色。
stroke-transparent: 此類設定 SVG 的透明顏色。
stroke-black: 此類設定 SVG 的黑色。
stroke-white: 此類設定 SVG 的白色。
stroke-slate-* : 此類設定 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 Stroke 類示例

以下示例將演示 Tailwind CSS SVG Stroke 類工具。

設定 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 元素將使用特定顏色的較淺色調進行描邊，而在懸停時，它將變為較深的色調。

示例

<!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>

列印頁面