Landings

Tailwind CSS

Fill

Utilities for styling the fill of SVG elements.

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