From e6349ae29234c86b8d37e753765ef43375761d6e Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 2 Aug 2022 11:01:21 -0400
Subject: [PATCH 1/2] Fix resolution of alpha values inside color functions

---
 src/util/resolveConfig.js |  2 +-
 tests/opacity.test.js     | 67 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js
index 5472da08876f..9a4845af5625 100644
--- a/src/util/resolveConfig.js
+++ b/src/util/resolveConfig.js
@@ -180,7 +180,7 @@ function resolveFunctionKeys(object) {
         val = val[path[index++]]
 
         let shouldResolveAsFn =
-          isFunction(val) && (path.alpha === undefined || index < path.length - 1)
+          isFunction(val) && (path.alpha === undefined || index <= path.length - 1)
 
         val = shouldResolveAsFn ? val(resolvePath, configUtils) : val
       }
diff --git a/tests/opacity.test.js b/tests/opacity.test.js
index 7215d14db332..c0cd3066e5ac 100644
--- a/tests/opacity.test.js
+++ b/tests/opacity.test.js
@@ -761,3 +761,70 @@ it('Theme functions can reference values with slashes in brackets', () => {
     `)
   })
 })
+
+it('works with opacity values defined as a placeholder or a function in when colors is a function', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div
+            class="bg-foo10 bg-foo20 bg-foo30 bg-foo40 bg-foo11 bg-foo21 bg-foo31 bg-foo41"
+          ></div>
+        `,
+      },
+    ],
+    theme: {
+      colors: () => ({
+        foobar1: ({ opacityValue }) => `rgb(255 100 0 / ${opacityValue ?? '100%'})`,
+        foobar2: `rgb(255 100 0 / <alpha-value>)`,
+        foobar3: {
+          100: ({ opacityValue }) => `rgb(255 100 0 / ${opacityValue ?? '100%'})`,
+          200: `rgb(255 100 0 / <alpha-value>)`,
+        },
+      }),
+      extend: {
+        backgroundColor: ({ theme }) => ({
+          foo10: theme('colors.foobar1'),
+          foo20: theme('colors.foobar2'),
+          foo30: theme('colors.foobar3.100'),
+          foo40: theme('colors.foobar3.200'),
+          foo11: theme('colors.foobar1 / 50%'),
+          foo21: theme('colors.foobar2 / 50%'),
+          foo31: theme('colors.foobar3.100 / 50%'),
+          foo41: theme('colors.foobar3.200 / 50%'),
+        }),
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .bg-foo10 {
+        background-color: rgb(255 100 0 / 100%);
+      }
+      .bg-foo20 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 100 0 / var(--tw-bg-opacity));
+      }
+      .bg-foo30 {
+        background-color: rgb(255 100 0 / 100%);
+      }
+      .bg-foo40 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 100 0 / var(--tw-bg-opacity));
+      }
+      .bg-foo11 {
+        background-color: rgb(255 100 0 / 50%);
+      }
+      .bg-foo21 {
+        background-color: rgb(255 100 0 / 50%);
+      }
+      .bg-foo31 {
+        background-color: rgb(255 100 0 / 50%);
+      }
+      .bg-foo41 {
+        background-color: rgb(255 100 0 / 50%);
+      }
+    `)
+  })
+})

From a186b09c495bb819f3bce68e4a0d6f244cadad7f Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Tue, 2 Aug 2022 11:10:08 -0400
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e58f1db75e54..55df105ee3c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Don’t prefix classes within reused arbitrary variants ([#8992](https://github.com/tailwindlabs/tailwindcss/pull/8992))
+- Fix usage of alpha values inside single-named colors that are functions ([#9008](https://github.com/tailwindlabs/tailwindcss/pull/9008))
 
 ## [3.1.7] - 2022-07-29