Tailwind CSS - SVG Stroke

Previous
Quiz
Next

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

Tailwind CSS SVG Stroke Classes

The following is the list of Tailwind CSS SVG Stroke classes that provide an effective way to handle the stroke of SVG elements.

Class CSS Properties
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;

Functionality of Tailwind CSS SVG Stroke Classes

  • stroke-none: This class does not set the SVG.
  • stroke-inherit: This class sets the inherit color in SVG from parent.
  • stroke-current: This class sets the current color in SVG.
  • stroke-transparent: This class sets the transparent color in SVG.
  • stroke-black: This class sets the black color in SVG.
  • stroke-white: This class sets the white color in SVG.
  • stroke-slate-*: This class sets the slate color in SVG.
  • stroke-gray-*: This class sets the gray color in SVG.
  • stroke-zinc-*: This class sets the zinc color in SVG.
  • stroke-neutral-*: This class sets the neutral color in SVG.
  • stroke-stone-*: This class sets the stone color in SVG.
  • stroke-red-*: This class sets the red color in SVG.
  • stroke-orange-*: This class sets the orange color in SVG.
  • stroke-amber-*: This class sets the amber color in SVG.
  • stroke-yellow-*: This class sets the yellow color in SVG.
  • stroke-lime-*: This class sets the lime color in SVG.
  • stroke-green-*: This class sets the green color in SVG.
  • stroke-emerald-*: This class sets the emerald color in SVG.
  • stroke-teal-*: This class sets the teal color in SVG.
  • stroke-cyan-*: This class sets the cyan color in SVG.
  • stroke-sky-*: This class sets the sky color in SVG.
  • stroke-blue-*: This class sets the blue color in SVG.
  • stroke-indigo-*: This class sets the indigo color in SVG.
  • stroke-violet-*: This class sets the violet color in SVG.
  • stroke-purple-*: This class sets the purple color in SVG.
  • stroke-fuchsia-*: This class sets the fuchsia color in SVG.
  • stroke-pink-*: This class sets the pink color in SVG.
  • stroke-rose-*: This class sets 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 Stroke Class Examples

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

Setting SVG Stroke Color

In this example, we will create two SVG elements and apply stroke colors to them using Tailwind CSS SVG stroke 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 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>

Conditional SVG Stroke Color

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

In the following example, we will create a SVG element and set a condition to change its stroke color on hover. Normally, the SVG element will be stroked 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 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>
Print Page
Previous
Next