Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Default colour not applied to ring when using function to generate it
**What version of Tailwind CSS are you using?**
v3.0.5

**What build tool (or framework if it abstracts the build tool) are you using?**
postcss-cli 8.4..5

**What version of Node.js are you using?**
v16.13.1

**What browser are you using?**
Chrome

**What operating system are you using?**
macOS

**Reproduction URL**
[Repo te reproduce bug](https://github.com/villekivela/tailwind3-bug)

**Describe your issue**
Default colour is not applied when using a function to generate default colour for ring. Works for border. Was working v2.2.19.


Hints:
@villekivela I worked in this, didn't got the solution, but will like to add something I figured out.
It does work with functions with hard coded colour values, the issue lies in doing the same variably.
A simple hard coded colour returning function
`const col = () => {return "#FF0000";}`
and calling part 
`ringColor: {
        DEFAULT: col(),
      }`
This works perfectly
> @villekivela I worked in this, didn't got the solution, but will like to add something I figured out. It does work with functions with hard coded colour values, the issue lies in doing the same variably. A simple hard coded colour returning function `const col = () => {return "#FF0000";}` and calling part `ringColor: { DEFAULT: col(), }` This works perfectly

i have the same problem but it curious how with colors like bg-sky-700 work but with another no, can you check if for this color  work in your proyect?

Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1925,7 +1925,7 @@ export let corePlugins = {
   ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
     let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
     let ringColorDefault = withAlphaValue(
-      theme('ringColor.DEFAULT'),
+      theme('ringColor')?.DEFAULT,
       ringOpacityDefault,
       `rgb(147 197 253 / ${ringOpacityDefault})`
     )


Test patch:
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -110,6 +110,103 @@ test('per-plugin colors with the same key can differ when using a custom colors
   })
 })
 
+test('default ring color can be a function', () => {
+  function color(variable) {
+    return function ({ opacityVariable, opacityValue }) {
+      if (opacityValue !== undefined) {
+        return `rgba(${variable}, ${opacityValue})`
+      }
+      if (opacityVariable !== undefined) {
+        return `rgba(${variable}, var(${opacityVariable}, 1))`
+      }
+      return `rgb(${variable})`
+    }
+  }
+
+  let config = {
+    content: [
+      {
+        raw: html` <div class="ring"></div> `,
+      },
+    ],
+
+    theme: {
+      extend: {
+        ringColor: {
+          DEFAULT: color('var(--red)'),
+        },
+      },
+    },
+    plugins: [],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
+        --tw-translate-x: 0;
+        --tw-translate-y: 0;
+        --tw-rotate: 0;
+        --tw-skew-x: 0;
+        --tw-skew-y: 0;
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        --tw-pan-x: ;
+        --tw-pan-y: ;
+        --tw-pinch-zoom: ;
+        --tw-scroll-snap-strictness: proximity;
+        --tw-ordinal: ;
+        --tw-slashed-zero: ;
+        --tw-numeric-figure: ;
+        --tw-numeric-spacing: ;
+        --tw-numeric-fraction: ;
+        --tw-ring-inset: ;
+        --tw-ring-offset-width: 0px;
+        --tw-ring-offset-color: #fff;
+        --tw-ring-color: rgba(var(--red), 0.5);
+        --tw-ring-offset-shadow: 0 0 #0000;
+        --tw-ring-shadow: 0 0 #0000;
+        --tw-shadow: 0 0 #0000;
+        --tw-shadow-colored: 0 0 #0000;
+        --tw-blur: ;
+        --tw-brightness: ;
+        --tw-contrast: ;
+        --tw-grayscale: ;
+        --tw-hue-rotate: ;
+        --tw-invert: ;
+        --tw-saturate: ;
+        --tw-sepia: ;
+        --tw-drop-shadow: ;
+        --tw-backdrop-blur: ;
+        --tw-backdrop-brightness: ;
+        --tw-backdrop-contrast: ;
+        --tw-backdrop-grayscale: ;
+        --tw-backdrop-hue-rotate: ;
+        --tw-backdrop-invert: ;
+        --tw-backdrop-opacity: ;
+        --tw-backdrop-saturate: ;
+        --tw-backdrop-sepia: ;
+      }
+
+      .ring {
+        --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);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      }
+    `)
+  })
+})
+
 it('fasly config values still work', () => {
   let config = {
     content: [{ raw: html`<div class="inset-0"></div>` }],