Tailwind CSS - SVG Fill

Previous
Quiz
Next

Tailwind CSS SVG Fill utility class that used to fill the color of SVG elements. There are so many colors and shades of each color can be used to fill the SVG element.

Tailwind CSS SVG Fill Classes

The following is the list of Tailwind CSS SVG Fill classes that provides an effective way of handling SVG element colors.

Class CSS Properties
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;
fill-amber-500 fill: #f59e0b;
fill-amber-600 fill: #d97706;
fill-amber-700 fill: #b45309;
fill-amber-800 fill: #92400e;
fill-amber-900 fill: #78350f;
fill-amber-950 fill: #451a03;
fill-yellow-50 fill: #fefce8;
fill-yellow-100 fill: #fef9c3;
fill-yellow-200 fill: #fef08a;
fill-yellow-300 fill: #fde047;
fill-yellow-400 fill: #facc15;
fill-yellow-500 fill: #eab308;
fill-yellow-600 fill: #ca8a04;
fill-yellow-700 fill: #a16207;
fill-yellow-800 fill: #854d0e;
fill-yellow-900 fill: #713f12;
fill-yellow-950 fill: #422006;
fill-lime-50 fill: #f7fee7;
fill-lime-100 fill: #ecfccb;
fill-lime-200 fill: #d9f99d;
fill-lime-300 fill: #bef264;
fill-lime-400 fill: #a3e635;
fill-lime-500 fill: #84cc16;
fill-lime-600 fill: #65a30d;
fill-lime-700 fill: #4d7c0f;
fill-lime-800 fill: #3f6212;
fill-lime-900 fill: #365314;
fill-lime-950 fill: #1a2e05;
fill-green-50 fill: #f0fdf4;
fill-green-100 fill: #dcfce7;
fill-green-200 fill: #bbf7d0;
fill-green-300 fill: #86efac;
fill-green-400 fill: #4ade80;
fill-green-500 fill: #22c55e;
fill-green-600 fill: #16a34a;
fill-green-700 fill: #15803d;
fill-green-800 fill: #166534;
fill-green-900 fill: #14532d;
fill-green-950 fill: #052e16;
fill-emerald-50 fill: #ecfdf5;
fill-emerald-100 fill: #d1fae5;
fill-emerald-200 fill: #a7f3d0;
fill-emerald-300 fill: #6ee7b7;
fill-emerald-400 fill: #34d399;
fill-emerald-500 fill: #10b981;
fill-emerald-600 fill: #059669;
fill-emerald-700 fill: #047857;
fill-emerald-800 fill: #065f46;
fill-emerald-900 fill: #064e3b;
fill-emerald-950 fill: #022c22;
fill-teal-50 fill: #f0fdfa;
fill-teal-100 fill: #ccfbf1;
fill-teal-200 fill: #99f6e4;
fill-teal-300 fill: #5eead4;
fill-teal-400 fill: #2dd4bf;
fill-teal-500 fill: #14b8a6;
fill-teal-600 fill: #0d9488;
fill-teal-700 fill: #0f766e;
fill-teal-800 fill: #115e59;
fill-teal-900 fill: #134e4a;
fill-teal-950 fill: #042f2e;
fill-cyan-50 fill: #ecfeff;
fill-cyan-100 fill: #cffafe;
fill-cyan-200 fill: #a5f3fc;
fill-cyan-300 fill: #67e8f9;
fill-cyan-400 fill: #22d3ee;
fill-cyan-500 fill: #06b6d4;
fill-cyan-600 fill: #0891b2;
fill-cyan-700 fill: #0e7490;
fill-cyan-800 fill: #155e75;
fill-cyan-900 fill: #164e63;
fill-cyan-950 fill: #083344;
fill-sky-50 fill: #f0f9ff;
fill-sky-100 fill: #e0f2fe;
fill-sky-200 fill: #bae6fd;
fill-sky-300 fill: #7dd3fc;
fill-sky-400 fill: #38bdf8;
fill-sky-500 fill: #0ea5e9;
fill-sky-600 fill: #0284c7;
fill-sky-700 fill: #0369a1;
fill-sky-800 fill: #075985;
fill-sky-900 fill: #0c4a6e;
fill-sky-950 fill: #082f49;
fill-blue-50 fill: #eff6ff;
fill-blue-100 fill: #dbeafe;
fill-blue-200 fill: #bfdbfe;
fill-blue-300 fill: #93c5fd;
fill-blue-400 fill: #60a5fa;
fill-blue-500 fill: #3b82f6;
fill-blue-600 fill: #2563eb;
fill-blue-700 fill: #1d4ed8;
fill-blue-800 fill: #1e40af;
fill-blue-900 fill: #1e3a8a;
fill-blue-950 fill: #172554;
fill-indigo-50 fill: #eef2ff;
fill-indigo-100 fill: #e0e7ff;
fill-indigo-200 fill: #c7d2fe;
fill-indigo-300 fill: #a5b4fc;
fill-indigo-400 fill: #818cf8;
fill-indigo-500 fill: #6366f1;
fill-indigo-600 fill: #4f46e5;
fill-indigo-700 fill: #4338ca;
fill-indigo-800 fill: #3730a3;
fill-indigo-900 fill: #312e81;
fill-indigo-950 fill: #1e1b4b;
fill-violet-50 fill: #f5f3ff;
fill-violet-100 fill: #ede9fe;
fill-violet-200 fill: #ddd6fe;
fill-violet-300 fill: #c4b5fd;
fill-violet-400 fill: #a78bfa;
fill-violet-500 fill: #8b5cf6;
fill-violet-600 fill: #7c3aed;
fill-violet-700 fill: #6d28d9;
fill-violet-800 fill: #5b21b6;
fill-violet-900 fill: #4c1d95;
fill-violet-950 fill: #2e1065;
fill-purple-50 fill: #faf5ff;
fill-purple-100 fill: #f3e8ff;
fill-purple-200 fill: #e9d5ff;
fill-purple-300 fill: #d8b4fe;
fill-purple-400 fill: #c084fc;
fill-purple-500 fill: #a855f7;
fill-purple-600 fill: #9333ea;
fill-purple-700 fill: #7e22ce;
fill-purple-800 fill: #6b21a8;
fill-purple-900 fill: #581c87;
fill-purple-950 fill: #3b0764;
fill-fuchsia-50 fill: #fdf4ff;
fill-fuchsia-100 fill: #fae8ff;
fill-fuchsia-200 fill: #f5d0fe;
fill-fuchsia-300 fill: #f0abfc;
fill-fuchsia-400 fill: #e879f9;
fill-fuchsia-500 fill: #d946ef;
fill-fuchsia-600 fill: #c026d3;
fill-fuchsia-700 fill: #a21caf;
fill-fuchsia-800 fill: #86198f;
fill-fuchsia-900 fill: #701a75;
fill-fuchsia-950 fill: #4a044e;
fill-pink-50 fill: #fdf2f8;
fill-pink-100 fill: #fce7f3;
fill-pink-200 fill: #fbcfe8;
fill-pink-300 fill: #f9a8d4;
fill-pink-400 fill: #f472b6;
fill-pink-500 fill: #ec4899;
fill-pink-600 fill: #db2777;
fill-pink-700 fill: #be185d;
fill-pink-800 fill: #9d174d;
fill-pink-900 fill: #831843;
fill-pink-950 fill: #500724;
fill-rose-50 fill: #fff1f2;
fill-rose-100 fill: #ffe4e6;
fill-rose-200 fill: #fecdd3;
fill-rose-300 fill: #fda4af;
fill-rose-400 fill: #fb7185;
fill-rose-500 fill: #f43f5e;
fill-rose-600 fill: #e11d48;
fill-rose-700 fill: #be123c;
fill-rose-800 fill: #9f1239;
fill-rose-900 fill: #881337;
fill-rose-950 fill: #4c0519;

Functionality of Tailwind CSS SVG Fill Classes

  • fill-none: This class does not fill the SVG.
  • fill-inherit: This class fills the inherit color in SVG from parent.
  • fill-current: This class fills the current color in SVG.
  • fill-transparent: This class fills the transparent color in SVG.
  • fill-black: This class fills the black color in SVG.
  • fill-white: This class fills the white color in SVG.
  • fill-slate-*: This class fills the slate color in SVG.
  • fill-gray-*: This class fills the gray color in SVG.
  • fill-zinc-*: This class fills the zinc color in SVG.
  • fill-neutral-*: This class fills the neutral color in SVG.
  • fill-stone-*: This class fills the stone color in SVG.
  • fill-red-*: This class fills the red color in SVG.
  • fill-orange-*: This class fills the orange color in SVG.
  • fill-amber-*: This class fills the amber color in SVG.
  • fill-yellow-*: This class fills the yellow color in SVG.
  • fill-lime-*: This class fills the lime color in SVG.
  • fill-green-*: This class fills the green color in SVG.
  • fill-emerald-*: This class fills the emerald color in SVG.
  • fill-teal-*: This class fills the teal color in SVG.
  • fill-cyan-*: This class fills the cyan color in SVG.
  • fill-sky-*: This class fills the sky color in SVG.
  • fill-blue-*: This class fills the blue color in SVG.
  • fill-indigo-*: This class fills the indigo color in SVG.
  • fill-violet-*: This class fills the violet color in SVG.
  • fill-purple-*: This class fills the purple color in SVG.
  • fill-fuchsia-*: This class fills the fuchsia color in SVG.
  • fill-pink-*: This class fills the pink color in SVG.
  • fill-rose-*: This class fills the rose color in SVG.

Note: The * can be replaced by 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 for different color shades of the mentioned color.

Tailwind CSS SVG Fill Class Examples

The following examples will illustrate the Tailwind CSS SVG Fill class utility.

Setting SVG Fill Color

Here in this example, we will create two SVG elements and fill color on them using Tailwind CSS SVG fill color classes.

Example

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

Conditional SVG Fill Color

In the following example, we will create a SVG element and set a condition to change its fill color on hover. Normally, the SVG element will be filled with lighter shades of a particular color, and on hover, it will become darker.

Example

<!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>
Print Page
Previous
Next