ring, ring-2/4/8, ring-<color>, ring-offset-* — box-shadow-based focus rings. This family contains 527 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
ring-inset | --tw-ring-inset: inset; |
ring-0 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); |
ring-1 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); |
ring-2 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); |
ring-4 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); |
ring-8 | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); |
ring | --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); |
ring-offset-0 | --tw-ring-offset-width: 0px; |
ring-offset-1 | --tw-ring-offset-width: 1px; |
ring-offset-2 | --tw-ring-offset-width: 2px; |
ring-offset-4 | --tw-ring-offset-width: 4px; |
ring-offset-8 | --tw-ring-offset-width: 8px; |
ring-inherit | --tw-ring-color: inherit; |
ring-current | --tw-ring-color: currentColor; |
ring-transparent | --tw-ring-color: transparent; |
ring-black | --tw-ring-opacity: 1; --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1)); |
ring-white | --tw-ring-opacity: 1; --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); |
ring-slate-50 | --tw-ring-opacity: 1; --tw-ring-color: rgb(248 250 252 / var(--tw-ring-opacity, 1)); |
ring-slate-100 | --tw-ring-opacity: 1; --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity, 1)); |
ring-slate-200 | --tw-ring-opacity: 1; --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity, 1)); |
ring-slate-300 | --tw-ring-opacity: 1; --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity, 1)); |
ring-slate-400 | --tw-ring-opacity: 1; --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1)); |
ring-slate-500 | --tw-ring-opacity: 1; --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity, 1)); |
ring-slate-600 | --tw-ring-opacity: 1; --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity, 1)); |
ring-slate-700 | --tw-ring-opacity: 1; --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1)); |
ring-slate-800 | --tw-ring-opacity: 1; --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity, 1)); |
ring-slate-900 | --tw-ring-opacity: 1; --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity, 1)); |
ring-slate-950 | --tw-ring-opacity: 1; --tw-ring-color: rgb(2 6 23 / var(--tw-ring-opacity, 1)); |
ring-gray-50 | --tw-ring-opacity: 1; --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity, 1)); |
ring-gray-100 | --tw-ring-opacity: 1; --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity, 1)); |
ring-gray-200 | --tw-ring-opacity: 1; --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1)); |
ring-gray-300 | --tw-ring-opacity: 1; --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity, 1)); |
ring-gray-400 | --tw-ring-opacity: 1; --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity, 1)); |
ring-gray-500 | --tw-ring-opacity: 1; --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1)); |
ring-gray-600 | --tw-ring-opacity: 1; --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity, 1)); |
ring-gray-700 | --tw-ring-opacity: 1; --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity, 1)); |
ring-gray-800 | --tw-ring-opacity: 1; --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity, 1)); |
ring-gray-900 | --tw-ring-opacity: 1; --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity, 1)); |
ring-gray-950 | --tw-ring-opacity: 1; --tw-ring-color: rgb(3 7 18 / var(--tw-ring-opacity, 1)); |
ring-zinc-50 | --tw-ring-opacity: 1; --tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity, 1)); |
ring-zinc-100 | --tw-ring-opacity: 1; --tw-ring-color: rgb(244 244 245 / var(--tw-ring-opacity, 1)); |
ring-zinc-200 | --tw-ring-opacity: 1; --tw-ring-color: rgb(228 228 231 / var(--tw-ring-opacity, 1)); |
ring-zinc-300 | --tw-ring-opacity: 1; --tw-ring-color: rgb(212 212 216 / var(--tw-ring-opacity, 1)); |
ring-zinc-400 | --tw-ring-opacity: 1; --tw-ring-color: rgb(161 161 170 / var(--tw-ring-opacity, 1)); |
ring-zinc-500 | --tw-ring-opacity: 1; --tw-ring-color: rgb(113 113 122 / var(--tw-ring-opacity, 1)); |
ring-zinc-600 | --tw-ring-opacity: 1; --tw-ring-color: rgb(82 82 91 / var(--tw-ring-opacity, 1)); |
ring-zinc-700 | --tw-ring-opacity: 1; --tw-ring-color: rgb(63 63 70 / var(--tw-ring-opacity, 1)); |
ring-zinc-800 | --tw-ring-opacity: 1; --tw-ring-color: rgb(39 39 42 / var(--tw-ring-opacity, 1)); |
ring-zinc-900 | --tw-ring-opacity: 1; --tw-ring-color: rgb(24 24 27 / var(--tw-ring-opacity, 1)); |
ring-zinc-950 | --tw-ring-opacity: 1; --tw-ring-color: rgb(9 9 11 / var(--tw-ring-opacity, 1)); |
ring-neutral-50 | --tw-ring-opacity: 1; --tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity, 1)); |
ring-neutral-100 | --tw-ring-opacity: 1; --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity, 1)); |
ring-neutral-200 | --tw-ring-opacity: 1; --tw-ring-color: rgb(229 229 229 / var(--tw-ring-opacity, 1)); |
ring-neutral-300 | --tw-ring-opacity: 1; --tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity, 1)); |
ring-neutral-400 | --tw-ring-opacity: 1; --tw-ring-color: rgb(163 163 163 / var(--tw-ring-opacity, 1)); |
ring-neutral-500 | --tw-ring-opacity: 1; --tw-ring-color: rgb(115 115 115 / var(--tw-ring-opacity, 1)); |
ring-neutral-600 | --tw-ring-opacity: 1; --tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity, 1)); |
ring-neutral-700 | --tw-ring-opacity: 1; --tw-ring-color: rgb(64 64 64 / var(--tw-ring-opacity, 1)); |
ring-neutral-800 | --tw-ring-opacity: 1; --tw-ring-color: rgb(38 38 38 / var(--tw-ring-opacity, 1)); |
ring-neutral-900 | --tw-ring-opacity: 1; --tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity, 1)); |
…and 467 more in this family — search by class name to find the exact one.
Example#
example
<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-lg">Ring focus</button>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) 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#
- Rings are box-shadows: they follow border-radius, outlines don't
- ring-offset-2 + ring-offset-white prevents color bleed
Related#
utilities/borders/ring|Ring · comparisons/ring-vs-border-vs-outline|Ring vs border vs outline