accent-* recolors form controls; caret-* recolors the text cursor. This family contains 495 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
caret-inheritcaret-color: inherit;
caret-currentcaret-color: currentColor;
caret-transparentcaret-color: transparent;
caret-blackcaret-color: #000;
caret-whitecaret-color: #fff;
caret-slate-50caret-color: #f8fafc;
caret-slate-100caret-color: #f1f5f9;
caret-slate-200caret-color: #e2e8f0;
caret-slate-300caret-color: #cbd5e1;
caret-slate-400caret-color: #94a3b8;
caret-slate-500caret-color: #64748b;
caret-slate-600caret-color: #475569;
caret-slate-700caret-color: #334155;
caret-slate-800caret-color: #1e293b;
caret-slate-900caret-color: #0f172a;
caret-slate-950caret-color: #020617;
caret-gray-50caret-color: #f9fafb;
caret-gray-100caret-color: #f3f4f6;
caret-gray-200caret-color: #e5e7eb;
caret-gray-300caret-color: #d1d5db;
caret-gray-400caret-color: #9ca3af;
caret-gray-500caret-color: #6b7280;
caret-gray-600caret-color: #4b5563;
caret-gray-700caret-color: #374151;
caret-gray-800caret-color: #1f2937;
caret-gray-900caret-color: #111827;
caret-gray-950caret-color: #030712;
caret-zinc-50caret-color: #fafafa;
caret-zinc-100caret-color: #f4f4f5;
caret-zinc-200caret-color: #e4e4e7;
caret-zinc-300caret-color: #d4d4d8;
caret-zinc-400caret-color: #a1a1aa;
caret-zinc-500caret-color: #71717a;
caret-zinc-600caret-color: #52525b;
caret-zinc-700caret-color: #3f3f46;
caret-zinc-800caret-color: #27272a;
caret-zinc-900caret-color: #18181b;
caret-zinc-950caret-color: #09090b;
caret-neutral-50caret-color: #fafafa;
caret-neutral-100caret-color: #f5f5f5;
caret-neutral-200caret-color: #e5e5e5;
caret-neutral-300caret-color: #d4d4d4;
caret-neutral-400caret-color: #a3a3a3;
caret-neutral-500caret-color: #737373;
caret-neutral-600caret-color: #525252;
caret-neutral-700caret-color: #404040;
caret-neutral-800caret-color: #262626;
caret-neutral-900caret-color: #171717;
caret-neutral-950caret-color: #0a0a0a;
caret-stone-50caret-color: #fafaf9;
caret-stone-100caret-color: #f5f5f4;
caret-stone-200caret-color: #e7e5e4;
caret-stone-300caret-color: #d6d3d1;
caret-stone-400caret-color: #a8a29e;
caret-stone-500caret-color: #78716c;
caret-stone-600caret-color: #57534e;
caret-stone-700caret-color: #44403c;
caret-stone-800caret-color: #292524;
caret-stone-900caret-color: #1c1917;
caret-stone-950caret-color: #0c0a09;

…and 435 more in this family — search by class name to find the exact one.

Example#

example
html
<input type="checkbox" class="accent-blue-500" checked />
<input class="caret-fuchsia-500" placeholder="Type…" />

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#

  • accent-* works on checkboxes, radios, ranges, progress

utilities/interactivity/cursor|Cursor · utilities/interactivity/scroll-snap|Scroll snap