fill-* and stroke-* across every palette, plus stroke-0…2 widths. This family contains 499 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
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; |
…and 439 more in this family — search by class name to find the exact one.
Example#
example
<svg class="fill-blue-500 stroke-slate-900 stroke-2" viewBox="0 0 24 24">…</svg>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Color icons from the parent: fill-current + text-blue-500
- stroke-current matches text color automatically
Related#
colors/index|Colors