outline, outline-2, outline-offset-2, outline-dashed… — focus rings and offset borders. This family contains 262 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
outline-noneoutline: 2px solid transparent; outline-offset: 2px;
outlineoutline-style: solid;
outline-dashedoutline-style: dashed;
outline-dottedoutline-style: dotted;
outline-doubleoutline-style: double;
outline-0outline-width: 0px;
outline-1outline-width: 1px;
outline-2outline-width: 2px;
outline-4outline-width: 4px;
outline-8outline-width: 8px;
outline-offset-0outline-offset: 0px;
outline-offset-1outline-offset: 1px;
outline-offset-2outline-offset: 2px;
outline-offset-4outline-offset: 4px;
outline-offset-8outline-offset: 8px;
outline-inheritoutline-color: inherit;
outline-currentoutline-color: currentColor;
outline-transparentoutline-color: transparent;
outline-blackoutline-color: #000;
outline-whiteoutline-color: #fff;
outline-slate-50outline-color: #f8fafc;
outline-slate-100outline-color: #f1f5f9;
outline-slate-200outline-color: #e2e8f0;
outline-slate-300outline-color: #cbd5e1;
outline-slate-400outline-color: #94a3b8;
outline-slate-500outline-color: #64748b;
outline-slate-600outline-color: #475569;
outline-slate-700outline-color: #334155;
outline-slate-800outline-color: #1e293b;
outline-slate-900outline-color: #0f172a;
outline-slate-950outline-color: #020617;
outline-gray-50outline-color: #f9fafb;
outline-gray-100outline-color: #f3f4f6;
outline-gray-200outline-color: #e5e7eb;
outline-gray-300outline-color: #d1d5db;
outline-gray-400outline-color: #9ca3af;
outline-gray-500outline-color: #6b7280;
outline-gray-600outline-color: #4b5563;
outline-gray-700outline-color: #374151;
outline-gray-800outline-color: #1f2937;
outline-gray-900outline-color: #111827;
outline-gray-950outline-color: #030712;
outline-zinc-50outline-color: #fafafa;
outline-zinc-100outline-color: #f4f4f5;
outline-zinc-200outline-color: #e4e4e7;
outline-zinc-300outline-color: #d4d4d8;
outline-zinc-400outline-color: #a1a1aa;
outline-zinc-500outline-color: #71717a;
outline-zinc-600outline-color: #52525b;
outline-zinc-700outline-color: #3f3f46;
outline-zinc-800outline-color: #27272a;
outline-zinc-900outline-color: #18181b;
outline-zinc-950outline-color: #09090b;
outline-neutral-50outline-color: #fafafa;
outline-neutral-100outline-color: #f5f5f5;
outline-neutral-200outline-color: #e5e5e5;
outline-neutral-300outline-color: #d4d4d4;
outline-neutral-400outline-color: #a3a3a3;
outline-neutral-500outline-color: #737373;
outline-neutral-600outline-color: #525252;

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

Example#

example
html
<button class="focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-2">
  Accessible focus
</button>

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#

  • Never remove focus outlines without replacement — accessibility requires them
  • outline-offset-2 gives the modern floating ring

Common mistakes#

  • outline-none without a custom visible focus state fails WCAG

utilities/borders/ring|Ring · comparisons/ring-vs-border-vs-outline|Ring vs border vs outline