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: #F8F8FA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-100--tw-ring-offset-color: #F2F1F6; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-200--tw-ring-offset-color: #E5E4E9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-300--tw-ring-offset-color: #CCCBD1; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-400--tw-ring-offset-color: #A9A8AF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-500--tw-ring-offset-color: #77767F; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-600--tw-ring-offset-color: #55545D; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-700--tw-ring-offset-color: #35343C; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-800--tw-ring-offset-color: #222128; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray-900--tw-ring-offset-color: #0F0D16; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-gray--tw-ring-offset-color: #E5E4E9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-0--tw-ring-offset-color: #F8F5FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-100--tw-ring-offset-color: #EDE0FE; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-200--tw-ring-offset-color: #D7BCFD; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-300--tw-ring-offset-color: #B482FA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-400--tw-ring-offset-color: #9553F8; 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: #440087; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-violet-800--tw-ring-offset-color: #340060; 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: #FBF5FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-100--tw-ring-offset-color: #F5DEFE; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-200--tw-ring-offset-color: #EEBCFC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-300--tw-ring-offset-color: #E181F3; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-400--tw-ring-offset-color: #C846E0; 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: #A300A8; 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: #7A0373; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-magenta-900--tw-ring-offset-color: #34002B; 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: #E5FAFF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-100--tw-ring-offset-color: #C6ECFC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-200--tw-ring-offset-color: #A3D3FB; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-300--tw-ring-offset-color: #76AAEF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-400--tw-ring-offset-color: #4B7AD9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-500--tw-ring-offset-color: #2157CE; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-600--tw-ring-offset-color: #1F3EAA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-700--tw-ring-offset-color: #0D227E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-800--tw-ring-offset-color: #01145E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue-900--tw-ring-offset-color: #00062F; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-blue--tw-ring-offset-color: #76AAEF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-0--tw-ring-offset-color: #D6FFF5; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-100--tw-ring-offset-color: #B5F6E9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-200--tw-ring-offset-color: #76E4D7; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-300--tw-ring-offset-color: #3CCBC5; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-400--tw-ring-offset-color: #2AA1A4; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-500--tw-ring-offset-color: #147F87; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-600--tw-ring-offset-color: #036873; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-700--tw-ring-offset-color: #03414F; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-800--tw-ring-offset-color: #012C34; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal-900--tw-ring-offset-color: #00181E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-teal--tw-ring-offset-color: #3CCBC5; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-0--tw-ring-offset-color: #EBFFE7; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-100--tw-ring-offset-color: #CFF8C7; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-200--tw-ring-offset-color: #91EA99; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-300--tw-ring-offset-color: #40D066; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-400--tw-ring-offset-color: #32A859; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-500--tw-ring-offset-color: #148540; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-600--tw-ring-offset-color: #016E3A; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-700--tw-ring-offset-color: #064826; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-800--tw-ring-offset-color: #012C17; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green-900--tw-ring-offset-color: #001A0D; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-green--tw-ring-offset-color: #40D066; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-0--tw-ring-offset-color: #FFFAEC; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-100--tw-ring-offset-color: #F9F1C9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-200--tw-ring-offset-color: #EDE78E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-300--tw-ring-offset-color: #D4CD52; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-400--tw-ring-offset-color: #B0AA31; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-500--tw-ring-offset-color: #7E7F1B; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-600--tw-ring-offset-color: #636408; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-700--tw-ring-offset-color: #424006; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-800--tw-ring-offset-color: #2A2601; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow-900--tw-ring-offset-color: #191700; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-yellow--tw-ring-offset-color: #D4CD52; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-0--tw-ring-offset-color: #FFF5F1; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-100--tw-ring-offset-color: #FEDBCE; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-200--tw-ring-offset-color: #FFC4A4; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-300--tw-ring-offset-color: #F2995B; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-400--tw-ring-offset-color: #DF7A30; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-500--tw-ring-offset-color: #B45F19; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-600--tw-ring-offset-color: #904808; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-700--tw-ring-offset-color: #633203; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-800--tw-ring-offset-color: #442100; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange-900--tw-ring-offset-color: #2D1100; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-orange--tw-ring-offset-color: #F2995B; 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: #FDB0B1; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-300--tw-ring-offset-color: #FA7370; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-400--tw-ring-offset-color: #E04542; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-500--tw-ring-offset-color: #C02C21; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-600--tw-ring-offset-color: #A41C1E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-700--tw-ring-offset-color: #7B0A0C; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-800--tw-ring-offset-color: #570305; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red-900--tw-ring-offset-color: #3A0102; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-red--tw-ring-offset-color: #FA7370; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-0--tw-ring-offset-color: #FFF3FF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-100--tw-ring-offset-color: #FEDDFA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-200--tw-ring-offset-color: #FDB1E7; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-300--tw-ring-offset-color: #F373C0; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-400--tw-ring-offset-color: #E54399; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-500--tw-ring-offset-color: #BE276D; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-600--tw-ring-offset-color: #A51750; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-700--tw-ring-offset-color: #740830; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-800--tw-ring-offset-color: #550220; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink-900--tw-ring-offset-color: #3D0115; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-pink--tw-ring-offset-color: #F373C0; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-light--tw-ring-offset-color: #F8F8FA; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-dark--tw-ring-offset-color: #35343C; 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: #9553F8; 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: #440087; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-secondary-dark--tw-ring-offset-color: #340060; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-info--tw-ring-offset-color: #76AAEF; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-info-light--tw-ring-offset-color: #A3D3FB; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-info-dark--tw-ring-offset-color: #4B7AD9; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-success--tw-ring-offset-color: #40D066; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-success-light--tw-ring-offset-color: #91EA99; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-success-dark--tw-ring-offset-color: #32A859; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-warning--tw-ring-offset-color: #D4CD52; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-warning-light--tw-ring-offset-color: #EDE78E; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-warning-dark--tw-ring-offset-color: #B0AA31; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-danger--tw-ring-offset-color: #FA7370; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-danger-light--tw-ring-offset-color: #FDB0B1; box-shadow: 0 0 0 var(--ring-offset-width) var(--ring-offset-color), var(--ring-shadow)
 
ring-opacity-danger-dark--tw-ring-offset-color: #E04542; 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: #35343C; 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.