Borders

Ring Offset Color

Utilities for setting the color of outline ring offsets.

Quick reference

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

Show all classes

Basic usage

Setting the ring offset color

Use the ring-offset-{color} utilities to change the color of a ring offset. Usually this is done to try and match the offset to the parent background color, since true box-shadow offsets aren’t actually possible in CSS.

Ring Offset Color - 图1

  1. <button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100 ...">
  2. Save Changes
  3. </button>

Changing the opacity

Control the opacity of an element’s ring offset color using the color opacity modifier.

  1. <button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100/50"></button>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

  1. <button class="ring-2 ring-purple-500 ring-offset-4 ring-offset-purple-100/[.55]"></button>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:ring-offset-blue-500 to only apply the ring-offset-blue-500 utility on hover.

  1. <div class="ring-2 ring-offset-2 ring-offset-blue-300 hover:ring-offset-blue-500">
  2. <!-- ... -->
  3. </div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:ring-offset-blue-500 to apply the ring-offset-blue-500 utility at only medium screen sizes and above.

  1. <div class="ring-2 ring-offset-2 ring-offset-blue-300 md:ring-offset-blue-500">
  2. <!-- ... -->
  3. </div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.


Using custom values

Customizing your theme

By default, Tailwind makes the entire default color palette available as ring offset color colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

tailwind.config.js

  1. module.exports = {
  2. theme: {
  3. extend: {
  4. colors: {
  5. 'regal-blue': '#243c5a',
  6. },
  7. }
  8. }
  9. }

Alternatively, you can customize just your ring offset color colors by editing theme.ringOffsetColor or theme.extend.ringOffsetColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off ring-offset-{color} value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

  1. <div class="ring-offset-[#50d71e]">
  2. <!-- ... -->
  3. </div>

Learn more about arbitrary value support in the arbitrary values documentation.