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>
打印页面
上一页
下一页
广告