Tailwind ring offset background color

@tailwindcss+forms+0.5.5.patch

diff --git a/node_modules/@tailwindcss/forms/src/index.js b/node_modules/@tailwindcss/forms/src/index.js
index 5d700f1..e30ecb5 100644
--- a/node_modules/@tailwindcss/forms/src/index.js
+++ b/node_modules/@tailwindcss/forms/src/index.js
@@ -55,7 +55,6 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
             'outline-offset': '2px',
             '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
             '--tw-ring-offset-width': '0px',
-            '--tw-ring-offset-color': '#fff',
             '--tw-ring-color': resolveColor(
               theme('colors.blue.600', colors.blue[600]),
               '--tw-ring-opacity'
@@ -212,7 +211,6 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
           'outline-offset': '2px',
           '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-ring-offset-width': '2px',
-          '--tw-ring-offset-color': '#fff',
           '--tw-ring-color': resolveColor(
             theme('colors.blue.600', colors.blue[600]),
             '--tw-ring-opacity'

tailwindcss+3.3.2.patch

diff --git a/node_modules/tailwindcss/lib/corePlugins.js b/node_modules/tailwindcss/lib/corePlugins.js
index ece3b3f..ff46b97 100644
--- a/node_modules/tailwindcss/lib/corePlugins.js
+++ b/node_modules/tailwindcss/lib/corePlugins.js
@@ -2690,16 +2690,19 @@ let corePlugins = {
     backgroundColor: ({ matchUtilities , theme , corePlugins  })=>{
         matchUtilities({
             bg: (value)=>{
-                if (!corePlugins("backgroundOpacity")) {
-                    return {
-                        "background-color": (0, _toColorValue.default)(value)
-                    };
+                const styles = corePlugins('backgroundOpacity')
+                    ? (0, _withAlphaVariable.default)({
+                        color: value,
+                        property: 'background-color',
+                        variable: '--tw-bg-opacity',
+                      })
+                    : { 'background-color': (0, _toColorValue.default)(value) };
+                if (corePlugins("ringOffsetColor")) {
+                  styles["& > *"] = {
+                    "--tw-ring-offset-color": (0, _toColorValue.default)(value)
+                  }
                 }
-                return (0, _withAlphaVariable.default)({
-                    color: value,
-                    property: "background-color",
-                    variable: "--tw-bg-opacity"
-                });
+                return styles;
             }
         }, {
             values: (0, _flattenColorPalette.default)(theme("backgroundColor")),
@@ -3719,7 +3722,7 @@ let corePlugins = {
             ]
         });
     },
-    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme , config  })=>{
+    ringWidth: ({ matchUtilities , addBase , addDefaults , addUtilities , theme , config  })=>{
         let ringColorDefault = (()=>{
             var _theme, _theme1;
             if ((0, _featureFlags.flagEnabled)(config(), "respectDefaultRingColorOpacity")) {
@@ -3734,13 +3737,17 @@ let corePlugins = {
         addDefaults("ring-width", {
             "--tw-ring-inset": " ",
             "--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",
             "--tw-shadow": "0 0 #0000",
             "--tw-shadow-colored": "0 0 #0000"
         });
+        addBase({
+            ":root": {
+                "--tw-ring-offset-color": theme("ringOffsetColor.DEFAULT", "#fff"),
+            }
+        });
         matchUtilities({
             ring: (value)=>{
                 return {
@@ -3810,7 +3817,7 @@ let corePlugins = {
     ], {
         type: "length"
     }),
-    ringOffsetColor: ({ matchUtilities , theme  })=>{
+    ringOffsetColor: ({ addUtilities , matchUtilities , theme  })=>{
         matchUtilities({
             "ring-offset": (value)=>{
                 return {
@@ -3824,6 +3831,11 @@ let corePlugins = {
                 "any"
             ]
         });
+        addUtilities({
+            ".ring-offset-default": {
+                "--tw-ring-offset-color": theme("ringOffsetColor.DEFAULT", "#fff"),
+            }
+        });
     },
     blur: ({ matchUtilities , theme  })=>{
         matchUtilities({
diff --git a/node_modules/tailwindcss/src/corePlugins.js b/node_modules/tailwindcss/src/corePlugins.js
index e4d2ff2..8345595 100644
--- a/node_modules/tailwindcss/src/corePlugins.js
+++ b/node_modules/tailwindcss/src/corePlugins.js
@@ -1721,17 +1721,21 @@ export let corePlugins = {
     matchUtilities(
       {
         bg: (value) => {
-          if (!corePlugins('backgroundOpacity')) {
-            return {
-              'background-color': toColorValue(value),
+          const styles = corePlugins('backgroundOpacity')
+            ? withAlphaVariable({
+                color: value,
+                property: 'background-color',
+                variable: '--tw-bg-opacity',
+              })
+            : { 'background-color': toColorValue(value) }
+
+          if (corePlugins('ringOffsetColor')) {
+            styles["& > *"] = {
+              "--tw-ring-offset-color": toColorValue(value)
             }
           }
 
-          return withAlphaVariable({
-            color: value,
-            property: 'background-color',
-            variable: '--tw-bg-opacity',
-          })
+          return styles;
         },
       },
       { values: flattenColorPalette(theme('backgroundColor')), type: ['color', 'any'] }
@@ -2391,7 +2395,7 @@ export let corePlugins = {
     )
   },
 
-  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
+  ringWidth: ({ matchUtilities, addBase, addDefaults, addUtilities, theme, config }) => {
     let ringColorDefault = (() => {
       if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
         return theme('ringColor.DEFAULT')
@@ -2413,7 +2417,6 @@ export let corePlugins = {
     addDefaults('ring-width', {
       '--tw-ring-inset': ' ',
       '--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',
@@ -2421,6 +2424,12 @@ export let corePlugins = {
       '--tw-shadow-colored': '0 0 #0000',
     })
 
+    addBase({
+      ':root': {
+        '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
+      },
+    })
+
     matchUtilities(
       {
         ring: (value) => {
@@ -2485,7 +2494,7 @@ export let corePlugins = {
     { type: 'length' }
   ),
 
-  ringOffsetColor: ({ matchUtilities, theme }) => {
+  ringOffsetColor: ({ addUtilities, matchUtilities, theme }) => {
     matchUtilities(
       {
         'ring-offset': (value) => {
@@ -2496,6 +2505,12 @@ export let corePlugins = {
       },
       { values: flattenColorPalette(theme('ringOffsetColor')), type: ['color', 'any'] }
     )
+
+    addUtilities({
+      '.ring-offset-default': {
+        '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
+      }
+    })
   },
 
   blur: ({ matchUtilities, theme }) => {

These patches are designed to address tailwindlabs/tailwindcss#8421 until an official solution emerges. You can apply them manually, but I recommend using patch-package.