diff --git a/__fixtures__/borders.js b/__fixtures__/borders.js
index f2f44d3c..3cc60e02 100644
--- a/__fixtures__/borders.js
+++ b/__fixtures__/borders.js
@@ -337,16 +337,203 @@ tw`divide-double`
 tw`divide-none`
 
 // https://tailwindcss.com/docs/ring-width
-// ...
+tw`ring-0`
+tw`ring-1`
+tw`ring-2`
+tw`ring-4`
+tw`ring-8`
+tw`ring`
+tw`ring-inset`
 
 // https://tailwindcss.com/docs/ring-color
-// ...
+tw`ring-transparent`
+tw`ring-current`
+tw`ring-black`
+tw`ring-white`
+tw`ring-gray-50`
+tw`ring-gray-100`
+tw`ring-gray-200`
+tw`ring-gray-300`
+tw`ring-gray-400`
+tw`ring-gray-500`
+tw`ring-gray-600`
+tw`ring-gray-700`
+tw`ring-gray-800`
+tw`ring-gray-900`
+tw`ring-red-50`
+tw`ring-red-100`
+tw`ring-red-200`
+tw`ring-red-300`
+tw`ring-red-400`
+tw`ring-red-500`
+tw`ring-red-600`
+tw`ring-red-700`
+tw`ring-red-800`
+tw`ring-red-900`
+tw`ring-yellow-50`
+tw`ring-yellow-100`
+tw`ring-yellow-200`
+tw`ring-yellow-300`
+tw`ring-yellow-400`
+tw`ring-yellow-500`
+tw`ring-yellow-600`
+tw`ring-yellow-700`
+tw`ring-yellow-800`
+tw`ring-yellow-900`
+tw`ring-green-50`
+tw`ring-green-100`
+tw`ring-green-200`
+tw`ring-green-300`
+tw`ring-green-400`
+tw`ring-green-500`
+tw`ring-green-600`
+tw`ring-green-700`
+tw`ring-green-800`
+tw`ring-green-900`
+tw`ring-blue-50`
+tw`ring-blue-100`
+tw`ring-blue-200`
+tw`ring-blue-300`
+tw`ring-blue-400`
+tw`ring-blue-500`
+tw`ring-blue-600`
+tw`ring-blue-700`
+tw`ring-blue-800`
+tw`ring-blue-900`
+tw`ring-indigo-50`
+tw`ring-indigo-100`
+tw`ring-indigo-200`
+tw`ring-indigo-300`
+tw`ring-indigo-400`
+tw`ring-indigo-500`
+tw`ring-indigo-600`
+tw`ring-indigo-700`
+tw`ring-indigo-800`
+tw`ring-indigo-900`
+tw`ring-purple-50`
+tw`ring-purple-100`
+tw`ring-purple-200`
+tw`ring-purple-300`
+tw`ring-purple-400`
+tw`ring-purple-500`
+tw`ring-purple-600`
+tw`ring-purple-700`
+tw`ring-purple-800`
+tw`ring-purple-900`
+tw`ring-pink-50`
+tw`ring-pink-100`
+tw`ring-pink-200`
+tw`ring-pink-300`
+tw`ring-pink-400`
+tw`ring-pink-500`
+tw`ring-pink-600`
+tw`ring-pink-700`
+tw`ring-pink-800`
+tw`ring-pink-900`
 
 // https://tailwindcss.com/docs/ring-opacity
-// ...
+tw`ring-opacity-0`
+tw`ring-opacity-5`
+tw`ring-opacity-10`
+tw`ring-opacity-20`
+tw`ring-opacity-25`
+tw`ring-opacity-30`
+tw`ring-opacity-40`
+tw`ring-opacity-50`
+tw`ring-opacity-60`
+tw`ring-opacity-70`
+tw`ring-opacity-75`
+tw`ring-opacity-80`
+tw`ring-opacity-90`
+tw`ring-opacity-95`
+tw`ring-opacity-100`
 
 // https://tailwindcss.com/docs/ring-offset-width
-// ...
+tw`ring-offset-0`
+tw`ring-offset-1`
+tw`ring-offset-2`
+tw`ring-offset-4`
+tw`ring-offset-8`
 
 // https://tailwindcss.com/docs/ring-offset-color
-// ...
+tw`ring-offset-transparent`
+tw`ring-offset-current`
+tw`ring-offset-black`
+tw`ring-offset-white`
+tw`ring-offset-gray-50`
+tw`ring-offset-gray-100`
+tw`ring-offset-gray-200`
+tw`ring-offset-gray-300`
+tw`ring-offset-gray-400`
+tw`ring-offset-gray-500`
+tw`ring-offset-gray-600`
+tw`ring-offset-gray-700`
+tw`ring-offset-gray-800`
+tw`ring-offset-gray-900`
+tw`ring-offset-red-50`
+tw`ring-offset-red-100`
+tw`ring-offset-red-200`
+tw`ring-offset-red-300`
+tw`ring-offset-red-400`
+tw`ring-offset-red-500`
+tw`ring-offset-red-600`
+tw`ring-offset-red-700`
+tw`ring-offset-red-800`
+tw`ring-offset-red-900`
+tw`ring-offset-yellow-50`
+tw`ring-offset-yellow-100`
+tw`ring-offset-yellow-200`
+tw`ring-offset-yellow-300`
+tw`ring-offset-yellow-400`
+tw`ring-offset-yellow-500`
+tw`ring-offset-yellow-600`
+tw`ring-offset-yellow-700`
+tw`ring-offset-yellow-800`
+tw`ring-offset-yellow-900`
+tw`ring-offset-green-50`
+tw`ring-offset-green-100`
+tw`ring-offset-green-200`
+tw`ring-offset-green-300`
+tw`ring-offset-green-400`
+tw`ring-offset-green-500`
+tw`ring-offset-green-600`
+tw`ring-offset-green-700`
+tw`ring-offset-green-800`
+tw`ring-offset-green-900`
+tw`ring-offset-blue-50`
+tw`ring-offset-blue-100`
+tw`ring-offset-blue-200`
+tw`ring-offset-blue-300`
+tw`ring-offset-blue-400`
+tw`ring-offset-blue-500`
+tw`ring-offset-blue-600`
+tw`ring-offset-blue-700`
+tw`ring-offset-blue-800`
+tw`ring-offset-blue-900`
+tw`ring-offset-purple-50`
+tw`ring-offset-purple-100`
+tw`ring-offset-purple-200`
+tw`ring-offset-purple-300`
+tw`ring-offset-purple-400`
+tw`ring-offset-purple-500`
+tw`ring-offset-purple-600`
+tw`ring-offset-purple-700`
+tw`ring-offset-purple-800`
+tw`ring-offset-purple-900`
+tw`ring-offset-pink-50`
+tw`ring-offset-pink-100`
+tw`ring-offset-pink-200`
+tw`ring-offset-pink-300`
+tw`ring-offset-pink-400`
+tw`ring-offset-pink-500`
+tw`ring-offset-pink-600`
+tw`ring-offset-pink-700`
+tw`ring-offset-pink-800`
+tw`ring-offset-pink-900`
+
+// Combined ring classes
+tw`ring ring-inset ring-purple-500 ring-offset-black ring-offset-4 ring-opacity-50`
+tw`ring ring-inset ring-purple-500 ring-offset-black ring-offset-4`
+tw`ring ring-purple-500 ring-offset-black ring-offset-4`
+tw`ring ring-offset-black ring-offset-4`
+tw`ring ring-offset-4`
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
index d20de362..0da46354 100644
--- a/__snapshots__/plugin.test.js.snap
+++ b/__snapshots__/plugin.test.js.snap
@@ -458,7 +458,8 @@ const _GlobalStyles = () => (
           50% { 
             transform: none; animationTimingFunction: cubic-bezier(0,0,0.2,1);
           }
-        }\`}
+        }
+\`}
   />
 )
 
@@ -4693,19 +4694,206 @@ tw\`divide-double\`
 tw\`divide-none\`
 
 // https://tailwindcss.com/docs/ring-width
-// ...
+tw\`ring-0\`
+tw\`ring-1\`
+tw\`ring-2\`
+tw\`ring-4\`
+tw\`ring-8\`
+tw\`ring\`
+tw\`ring-inset\`
 
 // https://tailwindcss.com/docs/ring-color
-// ...
+tw\`ring-transparent\`
+tw\`ring-current\`
+tw\`ring-black\`
+tw\`ring-white\`
+tw\`ring-gray-50\`
+tw\`ring-gray-100\`
+tw\`ring-gray-200\`
+tw\`ring-gray-300\`
+tw\`ring-gray-400\`
+tw\`ring-gray-500\`
+tw\`ring-gray-600\`
+tw\`ring-gray-700\`
+tw\`ring-gray-800\`
+tw\`ring-gray-900\`
+tw\`ring-red-50\`
+tw\`ring-red-100\`
+tw\`ring-red-200\`
+tw\`ring-red-300\`
+tw\`ring-red-400\`
+tw\`ring-red-500\`
+tw\`ring-red-600\`
+tw\`ring-red-700\`
+tw\`ring-red-800\`
+tw\`ring-red-900\`
+tw\`ring-yellow-50\`
+tw\`ring-yellow-100\`
+tw\`ring-yellow-200\`
+tw\`ring-yellow-300\`
+tw\`ring-yellow-400\`
+tw\`ring-yellow-500\`
+tw\`ring-yellow-600\`
+tw\`ring-yellow-700\`
+tw\`ring-yellow-800\`
+tw\`ring-yellow-900\`
+tw\`ring-green-50\`
+tw\`ring-green-100\`
+tw\`ring-green-200\`
+tw\`ring-green-300\`
+tw\`ring-green-400\`
+tw\`ring-green-500\`
+tw\`ring-green-600\`
+tw\`ring-green-700\`
+tw\`ring-green-800\`
+tw\`ring-green-900\`
+tw\`ring-blue-50\`
+tw\`ring-blue-100\`
+tw\`ring-blue-200\`
+tw\`ring-blue-300\`
+tw\`ring-blue-400\`
+tw\`ring-blue-500\`
+tw\`ring-blue-600\`
+tw\`ring-blue-700\`
+tw\`ring-blue-800\`
+tw\`ring-blue-900\`
+tw\`ring-indigo-50\`
+tw\`ring-indigo-100\`
+tw\`ring-indigo-200\`
+tw\`ring-indigo-300\`
+tw\`ring-indigo-400\`
+tw\`ring-indigo-500\`
+tw\`ring-indigo-600\`
+tw\`ring-indigo-700\`
+tw\`ring-indigo-800\`
+tw\`ring-indigo-900\`
+tw\`ring-purple-50\`
+tw\`ring-purple-100\`
+tw\`ring-purple-200\`
+tw\`ring-purple-300\`
+tw\`ring-purple-400\`
+tw\`ring-purple-500\`
+tw\`ring-purple-600\`
+tw\`ring-purple-700\`
+tw\`ring-purple-800\`
+tw\`ring-purple-900\`
+tw\`ring-pink-50\`
+tw\`ring-pink-100\`
+tw\`ring-pink-200\`
+tw\`ring-pink-300\`
+tw\`ring-pink-400\`
+tw\`ring-pink-500\`
+tw\`ring-pink-600\`
+tw\`ring-pink-700\`
+tw\`ring-pink-800\`
+tw\`ring-pink-900\`
 
 // https://tailwindcss.com/docs/ring-opacity
-// ...
+tw\`ring-opacity-0\`
+tw\`ring-opacity-5\`
+tw\`ring-opacity-10\`
+tw\`ring-opacity-20\`
+tw\`ring-opacity-25\`
+tw\`ring-opacity-30\`
+tw\`ring-opacity-40\`
+tw\`ring-opacity-50\`
+tw\`ring-opacity-60\`
+tw\`ring-opacity-70\`
+tw\`ring-opacity-75\`
+tw\`ring-opacity-80\`
+tw\`ring-opacity-90\`
+tw\`ring-opacity-95\`
+tw\`ring-opacity-100\`
 
 // https://tailwindcss.com/docs/ring-offset-width
-// ...
+tw\`ring-offset-0\`
+tw\`ring-offset-1\`
+tw\`ring-offset-2\`
+tw\`ring-offset-4\`
+tw\`ring-offset-8\`
 
 // https://tailwindcss.com/docs/ring-offset-color
-// ...
+tw\`ring-offset-transparent\`
+tw\`ring-offset-current\`
+tw\`ring-offset-black\`
+tw\`ring-offset-white\`
+tw\`ring-offset-gray-50\`
+tw\`ring-offset-gray-100\`
+tw\`ring-offset-gray-200\`
+tw\`ring-offset-gray-300\`
+tw\`ring-offset-gray-400\`
+tw\`ring-offset-gray-500\`
+tw\`ring-offset-gray-600\`
+tw\`ring-offset-gray-700\`
+tw\`ring-offset-gray-800\`
+tw\`ring-offset-gray-900\`
+tw\`ring-offset-red-50\`
+tw\`ring-offset-red-100\`
+tw\`ring-offset-red-200\`
+tw\`ring-offset-red-300\`
+tw\`ring-offset-red-400\`
+tw\`ring-offset-red-500\`
+tw\`ring-offset-red-600\`
+tw\`ring-offset-red-700\`
+tw\`ring-offset-red-800\`
+tw\`ring-offset-red-900\`
+tw\`ring-offset-yellow-50\`
+tw\`ring-offset-yellow-100\`
+tw\`ring-offset-yellow-200\`
+tw\`ring-offset-yellow-300\`
+tw\`ring-offset-yellow-400\`
+tw\`ring-offset-yellow-500\`
+tw\`ring-offset-yellow-600\`
+tw\`ring-offset-yellow-700\`
+tw\`ring-offset-yellow-800\`
+tw\`ring-offset-yellow-900\`
+tw\`ring-offset-green-50\`
+tw\`ring-offset-green-100\`
+tw\`ring-offset-green-200\`
+tw\`ring-offset-green-300\`
+tw\`ring-offset-green-400\`
+tw\`ring-offset-green-500\`
+tw\`ring-offset-green-600\`
+tw\`ring-offset-green-700\`
+tw\`ring-offset-green-800\`
+tw\`ring-offset-green-900\`
+tw\`ring-offset-blue-50\`
+tw\`ring-offset-blue-100\`
+tw\`ring-offset-blue-200\`
+tw\`ring-offset-blue-300\`
+tw\`ring-offset-blue-400\`
+tw\`ring-offset-blue-500\`
+tw\`ring-offset-blue-600\`
+tw\`ring-offset-blue-700\`
+tw\`ring-offset-blue-800\`
+tw\`ring-offset-blue-900\`
+tw\`ring-offset-purple-50\`
+tw\`ring-offset-purple-100\`
+tw\`ring-offset-purple-200\`
+tw\`ring-offset-purple-300\`
+tw\`ring-offset-purple-400\`
+tw\`ring-offset-purple-500\`
+tw\`ring-offset-purple-600\`
+tw\`ring-offset-purple-700\`
+tw\`ring-offset-purple-800\`
+tw\`ring-offset-purple-900\`
+tw\`ring-offset-pink-50\`
+tw\`ring-offset-pink-100\`
+tw\`ring-offset-pink-200\`
+tw\`ring-offset-pink-300\`
+tw\`ring-offset-pink-400\`
+tw\`ring-offset-pink-500\`
+tw\`ring-offset-pink-600\`
+tw\`ring-offset-pink-700\`
+tw\`ring-offset-pink-800\`
+tw\`ring-offset-pink-900\`
+
+// Combined ring classes
+tw\`ring ring-inset ring-purple-500 ring-offset-black ring-offset-4 ring-opacity-50\`
+tw\`ring ring-inset ring-purple-500 ring-offset-black ring-offset-4\`
+tw\`ring ring-purple-500 ring-offset-black ring-offset-4\`
+tw\`ring ring-offset-black ring-offset-4\`
+tw\`ring ring-offset-4\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
@@ -6120,15 +6308,738 @@ tw\`divide-none\`
     borderStyle: 'none',
   },
 }) // https://tailwindcss.com/docs/ring-width
-// ...
-// https://tailwindcss.com/docs/ring-color
-// ...
-// https://tailwindcss.com/docs/ring-opacity
-// ...
-// https://tailwindcss.com/docs/ring-offset-width
-// ...
-// https://tailwindcss.com/docs/ring-offset-color
-// ...
+
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+})
+;({
+  '--tw-ring-inset': 'inset',
+}) // https://tailwindcss.com/docs/ring-color
+
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'transparent',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'currentColor',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(0, 0, 0, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(255, 255, 255, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(249, 250, 251, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(243, 244, 246, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(229, 231, 235, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(209, 213, 219, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(156, 163, 175, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(107, 114, 128, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(75, 85, 99, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(55, 65, 81, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(31, 41, 55, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(17, 24, 39, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(254, 242, 242, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(254, 226, 226, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(254, 202, 202, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(252, 165, 165, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(239, 68, 68, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(220, 38, 38, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(185, 28, 28, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(153, 27, 27, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(127, 29, 29, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(255, 251, 235, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(254, 243, 199, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(253, 230, 138, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(252, 211, 77, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(251, 191, 36, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(245, 158, 11, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(217, 119, 6, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(180, 83, 9, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(146, 64, 14, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(120, 53, 15, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(236, 253, 245, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(209, 250, 229, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(167, 243, 208, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(110, 231, 183, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(52, 211, 153, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(16, 185, 129, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(5, 150, 105, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(4, 120, 87, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(6, 95, 70, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(6, 78, 59, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(239, 246, 255, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(219, 234, 254, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(191, 219, 254, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(147, 197, 253, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(96, 165, 250, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(59, 130, 246, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(37, 99, 235, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(29, 78, 216, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(30, 64, 175, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(30, 58, 138, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(238, 242, 255, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(224, 231, 255, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(199, 210, 254, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(165, 180, 252, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(129, 140, 248, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(99, 102, 241, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(79, 70, 229, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(67, 56, 202, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(55, 48, 163, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(49, 46, 129, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(245, 243, 255, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(237, 233, 254, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(221, 214, 254, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(196, 181, 253, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(167, 139, 250, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(139, 92, 246, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(124, 58, 237, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(109, 40, 217, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(91, 33, 182, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(76, 29, 149, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(253, 242, 248, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(252, 231, 243, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(251, 207, 232, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(249, 168, 212, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(244, 114, 182, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(236, 72, 153, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(219, 39, 119, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(190, 24, 93, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(157, 23, 77, var(--tw-ring-opacity))',
+})
+;({
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(131, 24, 67, var(--tw-ring-opacity))',
+}) // https://tailwindcss.com/docs/ring-opacity
+
+;({
+  '--tw-ring-opacity': '0',
+})
+;({
+  '--tw-ring-opacity': '0.05',
+})
+;({
+  '--tw-ring-opacity': '0.1',
+})
+;({
+  '--tw-ring-opacity': '0.2',
+})
+;({
+  '--tw-ring-opacity': '0.25',
+})
+;({
+  '--tw-ring-opacity': '0.3',
+})
+;({
+  '--tw-ring-opacity': '0.4',
+})
+;({
+  '--tw-ring-opacity': '0.5',
+})
+;({
+  '--tw-ring-opacity': '0.6',
+})
+;({
+  '--tw-ring-opacity': '0.7',
+})
+;({
+  '--tw-ring-opacity': '0.75',
+})
+;({
+  '--tw-ring-opacity': '0.8',
+})
+;({
+  '--tw-ring-opacity': '0.9',
+})
+;({
+  '--tw-ring-opacity': '0.95',
+})
+;({
+  '--tw-ring-opacity': '1',
+}) // https://tailwindcss.com/docs/ring-offset-width
+
+;({
+  '--tw-ring-offset-width': '0px',
+})
+;({
+  '--tw-ring-offset-width': '1px',
+})
+;({
+  '--tw-ring-offset-width': '2px',
+})
+;({
+  '--tw-ring-offset-width': '4px',
+})
+;({
+  '--tw-ring-offset-width': '8px',
+}) // https://tailwindcss.com/docs/ring-offset-color
+
+;({
+  '--tw-ring-offset-color': 'transparent',
+})
+;({
+  '--tw-ring-offset-color': 'currentColor',
+})
+;({
+  '--tw-ring-offset-color': '#000',
+})
+;({
+  '--tw-ring-offset-color': '#fff',
+})
+;({
+  '--tw-ring-offset-color': '#f9fafb',
+})
+;({
+  '--tw-ring-offset-color': '#f3f4f6',
+})
+;({
+  '--tw-ring-offset-color': '#e5e7eb',
+})
+;({
+  '--tw-ring-offset-color': '#d1d5db',
+})
+;({
+  '--tw-ring-offset-color': '#9ca3af',
+})
+;({
+  '--tw-ring-offset-color': '#6b7280',
+})
+;({
+  '--tw-ring-offset-color': '#4b5563',
+})
+;({
+  '--tw-ring-offset-color': '#374151',
+})
+;({
+  '--tw-ring-offset-color': '#1f2937',
+})
+;({
+  '--tw-ring-offset-color': '#111827',
+})
+;({
+  '--tw-ring-offset-color': '#fef2f2',
+})
+;({
+  '--tw-ring-offset-color': '#fee2e2',
+})
+;({
+  '--tw-ring-offset-color': '#fecaca',
+})
+;({
+  '--tw-ring-offset-color': '#fca5a5',
+})
+;({
+  '--tw-ring-offset-color': '#f87171',
+})
+;({
+  '--tw-ring-offset-color': '#ef4444',
+})
+;({
+  '--tw-ring-offset-color': '#dc2626',
+})
+;({
+  '--tw-ring-offset-color': '#b91c1c',
+})
+;({
+  '--tw-ring-offset-color': '#991b1b',
+})
+;({
+  '--tw-ring-offset-color': '#7f1d1d',
+})
+;({
+  '--tw-ring-offset-color': '#fffbeb',
+})
+;({
+  '--tw-ring-offset-color': '#fef3c7',
+})
+;({
+  '--tw-ring-offset-color': '#fde68a',
+})
+;({
+  '--tw-ring-offset-color': '#fcd34d',
+})
+;({
+  '--tw-ring-offset-color': '#fbbf24',
+})
+;({
+  '--tw-ring-offset-color': '#f59e0b',
+})
+;({
+  '--tw-ring-offset-color': '#d97706',
+})
+;({
+  '--tw-ring-offset-color': '#b45309',
+})
+;({
+  '--tw-ring-offset-color': '#92400e',
+})
+;({
+  '--tw-ring-offset-color': '#78350f',
+})
+;({
+  '--tw-ring-offset-color': '#ecfdf5',
+})
+;({
+  '--tw-ring-offset-color': '#d1fae5',
+})
+;({
+  '--tw-ring-offset-color': '#a7f3d0',
+})
+;({
+  '--tw-ring-offset-color': '#6ee7b7',
+})
+;({
+  '--tw-ring-offset-color': '#34d399',
+})
+;({
+  '--tw-ring-offset-color': '#10b981',
+})
+;({
+  '--tw-ring-offset-color': '#059669',
+})
+;({
+  '--tw-ring-offset-color': '#047857',
+})
+;({
+  '--tw-ring-offset-color': '#065f46',
+})
+;({
+  '--tw-ring-offset-color': '#064e3b',
+})
+;({
+  '--tw-ring-offset-color': '#eff6ff',
+})
+;({
+  '--tw-ring-offset-color': '#dbeafe',
+})
+;({
+  '--tw-ring-offset-color': '#bfdbfe',
+})
+;({
+  '--tw-ring-offset-color': '#93c5fd',
+})
+;({
+  '--tw-ring-offset-color': '#60a5fa',
+})
+;({
+  '--tw-ring-offset-color': '#3b82f6',
+})
+;({
+  '--tw-ring-offset-color': '#2563eb',
+})
+;({
+  '--tw-ring-offset-color': '#1d4ed8',
+})
+;({
+  '--tw-ring-offset-color': '#1e40af',
+})
+;({
+  '--tw-ring-offset-color': '#1e3a8a',
+})
+;({
+  '--tw-ring-offset-color': '#f5f3ff',
+})
+;({
+  '--tw-ring-offset-color': '#ede9fe',
+})
+;({
+  '--tw-ring-offset-color': '#ddd6fe',
+})
+;({
+  '--tw-ring-offset-color': '#c4b5fd',
+})
+;({
+  '--tw-ring-offset-color': '#a78bfa',
+})
+;({
+  '--tw-ring-offset-color': '#8b5cf6',
+})
+;({
+  '--tw-ring-offset-color': '#7c3aed',
+})
+;({
+  '--tw-ring-offset-color': '#6d28d9',
+})
+;({
+  '--tw-ring-offset-color': '#5b21b6',
+})
+;({
+  '--tw-ring-offset-color': '#4c1d95',
+})
+;({
+  '--tw-ring-offset-color': '#fdf2f8',
+})
+;({
+  '--tw-ring-offset-color': '#fce7f3',
+})
+;({
+  '--tw-ring-offset-color': '#fbcfe8',
+})
+;({
+  '--tw-ring-offset-color': '#f9a8d4',
+})
+;({
+  '--tw-ring-offset-color': '#f472b6',
+})
+;({
+  '--tw-ring-offset-color': '#ec4899',
+})
+;({
+  '--tw-ring-offset-color': '#db2777',
+})
+;({
+  '--tw-ring-offset-color': '#be185d',
+})
+;({
+  '--tw-ring-offset-color': '#9d174d',
+})
+;({
+  '--tw-ring-offset-color': '#831843',
+}) // Combined ring classes
+
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+  '--tw-ring-inset': 'inset',
+  '--tw-ring-opacity': '0.5',
+  '--tw-ring-color': 'rgba(139, 92, 246, var(--tw-ring-opacity))',
+  '--tw-ring-offset-color': '#000',
+  '--tw-ring-offset-width': '4px',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+  '--tw-ring-inset': 'inset',
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(139, 92, 246, var(--tw-ring-opacity))',
+  '--tw-ring-offset-color': '#000',
+  '--tw-ring-offset-width': '4px',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+  '--tw-ring-opacity': '1',
+  '--tw-ring-color': 'rgba(139, 92, 246, var(--tw-ring-opacity))',
+  '--tw-ring-offset-color': '#000',
+  '--tw-ring-offset-width': '4px',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+  '--tw-ring-offset-color': '#000',
+  '--tw-ring-offset-width': '4px',
+})
+;({
+  '--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)',
+  boxShadow:
+    'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+  '--tw-ring-offset-width': '4px',
+})
 
 
 `;
diff --git a/src/config/dynamicStyles.js b/src/config/dynamicStyles.js
index 3b9271eb..5fad5bc3 100644
--- a/src/config/dynamicStyles.js
+++ b/src/config/dynamicStyles.js
@@ -284,6 +284,21 @@ export default {
   },
   rounded: { prop: 'borderRadius', config: 'borderRadius' },
 
+  // https://tailwindcss.com/docs/ring-opacity
+  'ring-opacity': {
+    prop: '--tw-ring-opacity',
+    config: 'ringOpacity',
+    configFallback: 'opacity',
+  },
+
+  // https://tailwindcss.com/docs/ring-offset-width
+  // https://tailwindcss.com/docs/ring-offset-color
+  'ring-offset': { plugin: 'ringOffset' },
+
+  // https://tailwindcss.com/docs/ring-width
+  // https://tailwindcss.com/docs/ring-color
+  ring: { plugin: 'ring' },
+
   /**
    * ===========================================
    * Tables
diff --git a/src/getStyles.js b/src/getStyles.js
index b33da118..b2abb099 100644
--- a/src/getStyles.js
+++ b/src/getStyles.js
@@ -44,7 +44,7 @@ export default (classes, t, state) => {
 
     const pieces = getPieces({ classNameRaw, state })
     const { className, hasVariants } = pieces
-    const { configTwin } = state
+    const { configTwin, globalStyles } = state
 
     throwIf(!className, () =>
       hasVariants ? logNotFoundVariant({ classNameRaw }) : logNotFoundClass
@@ -78,6 +78,7 @@ export default (classes, t, state) => {
           corePlugin,
           classNameRaw,
           dynamicKey,
+          globalStyles,
         }),
     }
 
diff --git a/src/macro.js b/src/macro.js
index e0935144..702fa440 100644
--- a/src/macro.js
+++ b/src/macro.js
@@ -60,6 +60,7 @@ const twinMacro = ({ babel: { types: t }, references, state, config }) => {
   state.configExists = configExists
   state.config = configTailwind
   state.configTwin = configTwin
+  state.globalStyles = new Map()
 
   state.tailwindConfigIdentifier = generateUid('tailwindConfig', program)
   state.tailwindUtilsIdentifier = generateUid('tailwindUtils', program)
diff --git a/src/macro/globalStyles.js b/src/macro/globalStyles.js
index a298baa8..a07f94e2 100644
--- a/src/macro/globalStyles.js
+++ b/src/macro/globalStyles.js
@@ -30,10 +30,10 @@ const addGlobalCssImport = ({ identifier, t, program }) =>
     identifier,
   })
 
-const generateTaggedTemplateExpression = ({ identifier, t, keyframes }) => {
+const generateTaggedTemplateExpression = ({ identifier, t, globalStyles }) => {
   const backtickStyles = t.templateElement({
-    raw: `${keyframes}`,
-    cooked: `${keyframes}`,
+    raw: `${globalStyles}`,
+    cooked: `${globalStyles}`,
   })
   const ttExpression = t.taggedTemplateExpression(
     identifier,
@@ -42,32 +42,32 @@ const generateTaggedTemplateExpression = ({ identifier, t, keyframes }) => {
   return ttExpression
 }
 
-const getGlobalDeclarationTte = ({ t, stylesUid, globalUid, keyframes }) =>
+const getGlobalDeclarationTte = ({ t, stylesUid, globalUid, globalStyles }) =>
   t.variableDeclaration('const', [
     t.variableDeclarator(
       globalUid,
       generateTaggedTemplateExpression({
         t,
         identifier: stylesUid,
-        keyframes,
+        globalStyles,
       })
     ),
   ])
 
-const getGlobalTte = ({ t, stylesUid, keyframes }) =>
-  generateTaggedTemplateExpression({ t, identifier: stylesUid, keyframes })
+const getGlobalTte = ({ t, stylesUid, globalStyles }) =>
+  generateTaggedTemplateExpression({ t, identifier: stylesUid, globalStyles })
 
 const getGlobalDeclarationProperty = ({
   t,
   stylesUid,
   globalUid,
   state,
-  keyframes,
+  globalStyles,
 }) => {
   const ttExpression = generateTaggedTemplateExpression({
     t,
     identifier: state.cssIdentifier,
-    keyframes,
+    globalStyles,
   })
 
   const openingElement = t.jsxOpeningElement(
@@ -95,7 +95,7 @@ const getGlobalDeclarationProperty = ({
   return code
 }
 
-const getKeyframesString = keyframes =>
+const makeKeyframesFromConfig = keyframes =>
   Object.entries(keyframes)
     .map(
       ([name, frames]) => `
@@ -113,6 +113,8 @@ const getKeyframesString = keyframes =>
     )
     .join('')
 
+const makeGlobalStylesString = styles => Array.from(styles).join(' ') // eslint-disable-line unicorn/prefer-spread
+
 const handleGlobalStylesFunction = ({
   references,
   program,
@@ -136,18 +138,20 @@ const handleGlobalStylesFunction = ({
     )
   )
 
-  const themeKeyframes = state.config.theme.keyframes || {}
-  const keyframes = getKeyframesString(themeKeyframes)
-
   const globalUid = generateUid('GlobalStyles', program)
   const stylesUid = generateUid('globalImport', program)
 
+  const globalStyles = [
+    makeKeyframesFromConfig(state.config.theme.keyframes || {}),
+    makeGlobalStylesString(state.globalStyles.values() || ''),
+  ].join(`\n`)
+
   if (state.isStyledComponents) {
     const declaration = getGlobalDeclarationTte({
       t,
       globalUid,
       stylesUid,
-      keyframes,
+      globalStyles,
     })
     program.unshiftContainer('body', declaration)
     path.replaceWith(t.jSXIdentifier(globalUid.name))
@@ -159,7 +163,7 @@ const handleGlobalStylesFunction = ({
       globalUid,
       stylesUid,
       state,
-      keyframes,
+      globalStyles,
     })
     program.unshiftContainer('body', declaration)
     path.replaceWith(t.jSXIdentifier(globalUid.name))
@@ -167,7 +171,7 @@ const handleGlobalStylesFunction = ({
   }
 
   if (state.isGoober) {
-    const declaration = getGlobalTte({ t, stylesUid, keyframes })
+    const declaration = getGlobalTte({ t, stylesUid, globalStyles })
     program.unshiftContainer('body', declaration)
     parentPath.remove()
   }
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 7b1b05d4..4ff892fe 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -6,6 +6,8 @@ export { default as divide } from './divide'
 export { default as gradient } from './gradient'
 export { default as outline } from './outline'
 export { default as placeholder } from './placeholder'
+export { default as ring } from './ring'
+export { default as ringOffset } from './ringOffset'
 export { default as space } from './space'
 export { default as stroke } from './stroke'
 export { default as text } from './text'
diff --git a/src/plugins/ring.js b/src/plugins/ring.js
new file mode 100644
index 00000000..287c6f8c
--- /dev/null
+++ b/src/plugins/ring.js
@@ -0,0 +1,90 @@
+import { withAlpha, toRgba } from './../utils'
+
+function safeCall(callback, defaultValue) {
+  try {
+    return callback()
+  } catch (_) {
+    return defaultValue
+  }
+}
+
+export const addGlobalWidthStyles = ({ theme, globalStyles }) => {
+  if (globalStyles.has('ring')) return
+
+  const ringColorDefault = (([r, g, b]) =>
+    `rgba(${r}, ${g}, ${b}, ${theme('ringOpacity.DEFAULT') || '0.5'})`)(
+    safeCall(() => toRgba(theme('ringColor.DEFAULT')), ['147', '197', '253'])
+  )
+
+  globalStyles.set(
+    'ring',
+    `* {
+        --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+        --tw-ring-offset-width: 0px;
+        --tw-ring-offset-color: #fff;
+        --tw-ring-color: ${ringColorDefault};
+        --tw-ring-offset-shadow: 0 0 #0000;
+        --tw-ring-shadow: 0 0 #0000;
+      }`
+  )
+}
+
+const handleWidth = ({ configValue, important }) => {
+  const value = configValue('ringWidth')
+  if (!value) return
+
+  return {
+    '--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(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
+    boxShadow: `${[
+      `var(--tw-ring-offset-shadow)`,
+      `var(--tw-ring-shadow)`,
+      `var(--tw-shadow, 0 0 #0000)`,
+    ].join(', ')}${important}`,
+  }
+}
+
+const handleColor = ({ configValue, important, disableColorVariables }) => {
+  const value = configValue('ringColor')
+  if (!value) return
+
+  return {
+    '--tw-ring-opacity': '1',
+    ...withAlpha({
+      color: value,
+      property: '--tw-ring-color',
+      variable: !disableColorVariables && '--tw-ring-opacity',
+      important,
+    }),
+  }
+}
+
+export default properties => {
+  const {
+    theme,
+    match,
+    getConfigValue,
+    globalStyles,
+    configTwin: { disableColorVariables },
+    errors: { errorSuggestions },
+    pieces: { important },
+  } = properties
+
+  const classValue = match(/(?<=(ring)-)([^]*)/)
+  const configValue = config => getConfigValue(theme(config), classValue)
+
+  if (classValue === 'inset') return { '--tw-ring-inset': 'inset' }
+
+  const width = handleWidth({ configValue, important })
+  if (width) {
+    addGlobalWidthStyles({ theme, globalStyles })
+    return width
+  }
+
+  const color = handleColor({ configValue, important, disableColorVariables })
+  if (color) return color
+
+  errorSuggestions({
+    config: ['ringWidth', 'ringColor'],
+  })
+}
diff --git a/src/plugins/ringOffset.js b/src/plugins/ringOffset.js
new file mode 100644
index 00000000..feb3d120
--- /dev/null
+++ b/src/plugins/ringOffset.js
@@ -0,0 +1,37 @@
+import { toColorValue } from './../utils'
+
+const handleColor = ({ configValue }) => {
+  const value = configValue('ringOffsetColor')
+  if (!value) return
+
+  return { '--tw-ring-offset-color': toColorValue(value) }
+}
+
+const handleWidth = ({ configValue }) => {
+  const value = configValue('ringOffsetWidth')
+  if (!value) return
+
+  return { '--tw-ring-offset-width': value }
+}
+
+export default properties => {
+  const {
+    theme,
+    match,
+    getConfigValue,
+    errors: { errorSuggestions },
+  } = properties
+
+  const classValue = match(/(?<=(ring-offset)-)([^]*)/)
+  const configValue = config => getConfigValue(theme(config), classValue)
+
+  const width = handleWidth({ configValue })
+  if (width) return width
+
+  const color = handleColor({ configValue })
+  if (color) return color
+
+  errorSuggestions({
+    config: ['ringOffsetWidth', 'ringOffsetColor'],
+  })
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index 04bf6dd4..05a827c3 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -3,3 +3,4 @@ export { default as resolveConfig } from './resolveConfig'
 export { default as getProperties } from './getProperties'
 export { default as withAlpha } from './withAlpha'
 export { toRgba } from './withAlpha'
+export { toColorValue } from './toColorValue'
diff --git a/src/utils/toColorValue.js b/src/utils/toColorValue.js
new file mode 100644
index 00000000..427cf800
--- /dev/null
+++ b/src/utils/toColorValue.js
@@ -0,0 +1,2 @@
+export const toColorValue = maybeFunction =>
+  typeof maybeFunction === 'function' ? maybeFunction({}) : maybeFunction