Tailwind CSS - SVG 填充

上一頁
下一頁

Tailwind CSS SVG Fill 實用程式類用於填充 SVG 元素的顏色。可以使用許多顏色和每種顏色的色調來填充 SVG 元素。

Tailwind CSS SVG Fill 類

以下是提供有效處理 SVG 元素顏色的 **Tailwind CSS SVG Fill** 類列表。

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

Tailwind CSS SVG 填充類的功能

  • fill-none：此類不填充 SVG。
  • fill-inherit：此類從父級繼承 SVG 中的顏色進行填充。
  • fill-current：此類填充 SVG 中的當前顏色。
  • fill-transparent：此類填充 SVG 中的透明顏色。
  • fill-black：此類填充 SVG 中的黑色。
  • fill-white：此類填充 SVG 中的白色。
  • fill-slate-*：此類填充 SVG 中的石板色。
  • fill-gray-*：此類填充 SVG 中的灰色。
  • fill-zinc-*：此類填充 SVG 中的鋅色。
  • fill-neutral-*：此類填充 SVG 中的中性色。
  • fill-stone-*：此類填充 SVG 中的石色。
  • fill-red-*：此類填充 SVG 中的紅色。
  • fill-orange-*：此類填充 SVG 中的橙色。
  • fill-amber-*：此類填充 SVG 中的琥珀色。
  • fill-yellow-*：此類填充 SVG 中的黃色。
  • fill-lime-*：此類填充 SVG 中的青檸色。
  • fill-green-*：此類填充 SVG 中的綠色。
  • fill-emerald-*：此類填充 SVG 中的祖母綠。
  • fill-teal-*：此類填充 SVG 中的藍綠色。
  • fill-cyan-*：此類填充 SVG 中的青色。
  • fill-sky-*：此類填充 SVG 中的天藍色。
  • fill-blue-*：此類填充 SVG 中的藍色。
  • fill-indigo-*：此類填充 SVG 中的靛藍色。
  • fill-violet-*：此類填充 SVG 中的紫羅蘭色。
  • fill-purple-*：此類填充 SVG 中的紫色。
  • fill-fuchsia-*：此類填充 SVG 中的紫紅色。
  • fill-pink-*：此類填充 SVG 中的粉色。
  • fill-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 Fill Class
    </h2>
    <p class="mt-4 text-lg">Bell SVG fill-green-500 Class</p>
    <svg class="fill-green-500 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path fill-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 fill-blue-500 Class</p>
    <svg class="fill-blue-500 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path fill-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 Fill Class
    </h2>
    <p class="mt-4 text-lg">Hover Over the Bell</p>
    <svg class="fill-green-300 hover:fill-green-600 h-12" 
         viewBox="0 0 46 48" 
         xmlns="http://www.w3.org/2000/svg">
        <path fill-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>
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.