diff --git a/__fixtures__/globalStyles/tailwind.config.js b/__fixtures__/globalStyles/tailwind.config.js
index ea543d34..00c9ff65 100644
--- a/__fixtures__/globalStyles/tailwind.config.js
+++ b/__fixtures__/globalStyles/tailwind.config.js
@@ -12,6 +12,12 @@ module.exports = {
         400: 'grayish',
       },
     },
+    ringOffsetWidth: {
+      DEFAULT: '10px',
+    },
+    ringOffsetColor: {
+      DEFAULT: 'rainbow',
+    },
     borderColor: {
       // Tests the dynamic default border default color
       DEFAULT: 'blueish',
diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap
index d82172f1..cc103f37 100644
--- a/__snapshots__/plugin.test.js.snap
+++ b/__snapshots__/plugin.test.js.snap
@@ -7971,8 +7971,8 @@ const _GlobalStyles = () => (
       }
       * {
         --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-        --tw-ring-offset-width: 0px;
-        --tw-ring-offset-color: #fff;
+        --tw-ring-offset-width: 10px;
+        --tw-ring-offset-color: rainbow;
         --tw-ring-color: rgba(59, 130, 246, 0.5);
         --tw-ring-offset-shadow: 0 0 #0000;
         --tw-ring-shadow: 0 0 #0000;
diff --git a/src/plugins/ring.js b/src/plugins/ring.js
index 2d70b87d..6f6a1107 100644
--- a/src/plugins/ring.js
+++ b/src/plugins/ring.js
@@ -16,8 +16,8 @@ export const globalRingStyles = ({ theme }) => {
 
   return `* {
     --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-color: #fff;
+    --tw-ring-offset-width: ${theme('ringOffsetWidth.DEFAULT') || '0px'};
+    --tw-ring-offset-color: ${theme('ringOffsetColor.DEFAULT') || '#fff'};
     --tw-ring-color: ${ringColorDefault};
     --tw-ring-offset-shadow: 0 0 #0000;
     --tw-ring-shadow: 0 0 #0000;