Ring offset color

Utilities for setting the color of outline ring offsets.


Class reference

ClassProperties
ring-opacity-current--tw-ring-offset-color: currentColor; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-transparent--tw-ring-offset-color: transparent; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-black--tw-ring-offset-color: #000; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-white--tw-ring-offset-color: #FFF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-0--tw-ring-offset-color: #FDF8FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-100--tw-ring-offset-color: #F8F6F9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-200--tw-ring-offset-color: #E9E7EA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-300--tw-ring-offset-color: #CFCBCE; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-400--tw-ring-offset-color: #A8A3A7; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-500--tw-ring-offset-color: #7B7479; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-600--tw-ring-offset-color: #514B4F; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-700--tw-ring-offset-color: #342E32; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-800--tw-ring-offset-color: #231E21; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-900--tw-ring-offset-color: #1A1217; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray--tw-ring-offset-color: #E9E7EA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-0--tw-ring-offset-color: #F6F3FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-100--tw-ring-offset-color: #EFE4FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-200--tw-ring-offset-color: #DCC4FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-300--tw-ring-offset-color: #BD90FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-400--tw-ring-offset-color: #944EFA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-500--tw-ring-offset-color: #680CE9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-600--tw-ring-offset-color: #5900BE; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-700--tw-ring-offset-color: #49008F; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-800--tw-ring-offset-color: #350061; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-900--tw-ring-offset-color: #1E0033; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet--tw-ring-offset-color: #680CE9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-0--tw-ring-offset-color: #FBF3FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-100--tw-ring-offset-color: #F7DDFF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-200--tw-ring-offset-color: #EFB8FD; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-300--tw-ring-offset-color: #E583F7; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-400--tw-ring-offset-color: #D543ED; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-500--tw-ring-offset-color: #BF04DC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-600--tw-ring-offset-color: #B400BA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-700--tw-ring-offset-color: #92008A; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-800--tw-ring-offset-color: #630056; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-900--tw-ring-offset-color: #330029; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta--tw-ring-offset-color: #BF04DC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-0--tw-ring-offset-color: #F4FDFF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-100--tw-ring-offset-color: #C2EBFD; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-200--tw-ring-offset-color: #90C9F7; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-300--tw-ring-offset-color: #64A0EB; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-400--tw-ring-offset-color: #4177D8; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-500--tw-ring-offset-color: #2753BF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-600--tw-ring-offset-color: #1637A1; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-700--tw-ring-offset-color: #0B2381; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-800--tw-ring-offset-color: #051560; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-900--tw-ring-offset-color: #020D40; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue--tw-ring-offset-color: #64A0EB; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-0--tw-ring-offset-color: #F4FFFC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-100--tw-ring-offset-color: #BEF8EC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-200--tw-ring-offset-color: #87E8DC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-300--tw-ring-offset-color: #57CDC8; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-400--tw-ring-offset-color: #32A4A8; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-500--tw-ring-offset-color: #1A777F; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-600--tw-ring-offset-color: #0C515A; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-700--tw-ring-offset-color: #05363E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-800--tw-ring-offset-color: #02272D; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-900--tw-ring-offset-color: #012026; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal--tw-ring-offset-color: #57CDC8; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-0--tw-ring-offset-color: #F6FFF4; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-100--tw-ring-offset-color: #C0F8BE; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-200--tw-ring-offset-color: #87E891; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-300--tw-ring-offset-color: #57CD71; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-400--tw-ring-offset-color: #32A857; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-500--tw-ring-offset-color: #1A7F40; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-600--tw-ring-offset-color: #0C5A2D; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-700--tw-ring-offset-color: #053E20; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-800--tw-ring-offset-color: #022D17; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-900--tw-ring-offset-color: #012614; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green--tw-ring-offset-color: #57CD71; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-0--tw-ring-offset-color: #FFFCF4; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-100--tw-ring-offset-color: #F9F0BF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-200--tw-ring-offset-color: #EAE388; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-300--tw-ring-offset-color: #CECF58; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-400--tw-ring-offset-color: #A2A933; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-500--tw-ring-offset-color: #727D19; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-600--tw-ring-offset-color: #4A550B; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-700--tw-ring-offset-color: #303805; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-800--tw-ring-offset-color: #212702; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-900--tw-ring-offset-color: #1B2101; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow--tw-ring-offset-color: #CECF58; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-0--tw-ring-offset-color: #FFF7F4; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-100--tw-ring-offset-color: #FDD0BC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-200--tw-ring-offset-color: #F6AB85; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-300--tw-ring-offset-color: #E98C55; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-400--tw-ring-offset-color: #D6722F; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-500--tw-ring-offset-color: #BB5B16; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-600--tw-ring-offset-color: #9B4606; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-700--tw-ring-offset-color: #793500; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-800--tw-ring-offset-color: #552600; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-900--tw-ring-offset-color: #331700; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange--tw-ring-offset-color: #E98C55; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-0--tw-ring-offset-color: #FFF4F4; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-100--tw-ring-offset-color: #FDC2C4; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-200--tw-ring-offset-color: #F79092; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-300--tw-ring-offset-color: #EB6467; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-400--tw-ring-offset-color: #D84144; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-500--tw-ring-offset-color: #BF272A; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-600--tw-ring-offset-color: #A11618; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-700--tw-ring-offset-color: #810B0D; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-800--tw-ring-offset-color: #600507; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-900--tw-ring-offset-color: #400203; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red--tw-ring-offset-color: #EB6467; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-0--tw-ring-offset-color: #FFF4FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-100--tw-ring-offset-color: #FDC2F5; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-200--tw-ring-offset-color: #F790DB; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-300--tw-ring-offset-color: #EB64B6; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-400--tw-ring-offset-color: #D84190; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-500--tw-ring-offset-color: #BF276C; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-600--tw-ring-offset-color: #A1164E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-700--tw-ring-offset-color: #810B36; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-800--tw-ring-offset-color: #600525; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-900--tw-ring-offset-color: #400217; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink--tw-ring-offset-color: #EB64B6; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-light--tw-ring-offset-color: #FDF8FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-dark--tw-ring-offset-color: #342E32; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-primary--tw-ring-offset-color: #680CE9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-primary-light--tw-ring-offset-color: #944EFA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-primary-dark--tw-ring-offset-color: #5900BE; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-secondary--tw-ring-offset-color: #1E0033; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-secondary-light--tw-ring-offset-color: #49008F; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-secondary-dark--tw-ring-offset-color: #350061; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-info--tw-ring-offset-color: #64A0EB; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-info-light--tw-ring-offset-color: #90C9F7; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-info-dark--tw-ring-offset-color: #4177D8; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-success--tw-ring-offset-color: #57CD71; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-success-light--tw-ring-offset-color: #87E891; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-success-dark--tw-ring-offset-color: #32A857; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-warning--tw-ring-offset-color: #CECF58; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-warning-light--tw-ring-offset-color: #EAE388; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-warning-dark--tw-ring-offset-color: #A2A933; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-danger--tw-ring-offset-color: #EB6467; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-danger-light--tw-ring-offset-color: #F79092; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-danger-dark--tw-ring-offset-color: #D84144; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-brand-primary--tw-ring-offset-color: #680CE9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-brand-accent--tw-ring-offset-color: #BF04DC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-brand-secondary--tw-ring-offset-color: #1E0033; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-brand-dark--tw-ring-offset-color: #250D2E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 

# Usage

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.

bg-violet-100

<div class="... bg-violet-100">
<button class="... ring ring-violet-600 ring-offset-4 ring-offset-violet-100">
ring-offset-violet-100
</button>
</div>

# Responsive

To control the ring offset color at a specific breakpoint, add a {screen}: prefix to any existing ring offset color utility. For example, use md:ring-offset-blue-500 to apply the ring-offset-blue-500 utility at only medium screen sizes and above.

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

For more information about Elements’ responsive design features, check out the Responsive Design documentation.