Ring offset color
Utilities for setting the color of outline ring offsets.
Class reference
Class | Properties | |
---|---|---|
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.
On this Page
v1.13.5