[tailwindcss] —— SVG | worst developer’s Blog

type

status

date

slug

summary

Fill

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

Stroke

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

Utilities for styling the stroke of SVG elements.

https://tailwindcss.com/docs/stroke

Stroke Width

Class	Properties
stroke-0	stroke-width: 0;
stroke-1	stroke-width: 1;
stroke-2	stroke-width: 2;