diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40f5812d63f2..ab7803c3ee99 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix "Maximum call stack size exceeded" bug ([#8636](https://github.com/tailwindlabs/tailwindcss/pull/8636))
 - Allow functions returning parallel variants to mutate the container ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
 - Remove text opacity CSS variables from `::marker` ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
+- Provide default to `<alpha-value>` when using `theme()` ([#8622](https://github.com/tailwindlabs/tailwindcss/pull/8622))
 
 ## [3.1.2] - 2022-06-10
 
diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
index c6c86c62276e..4fcfa83d9f47 100644
--- a/src/lib/evaluateTailwindFunctions.js
+++ b/src/lib/evaluateTailwindFunctions.js
@@ -183,9 +183,15 @@ export default function ({ tailwindConfig: config }) {
         throw node.error(error)
       }
 
-      if (alpha !== undefined) {
-        value = parseColorFormat(value)
-        value = withAlphaValue(value, alpha, value)
+      let maybeColor = parseColorFormat(value)
+      let isColorFunction = maybeColor !== undefined && typeof maybeColor === 'function'
+
+      if (alpha !== undefined || isColorFunction) {
+        if (alpha === undefined) {
+          alpha = 1.0
+        }
+
+        value = withAlphaValue(maybeColor, alpha, maybeColor)
       }
 
       return value
diff --git a/tests/evaluateTailwindFunctions.test.js b/tests/evaluateTailwindFunctions.test.js
index 30976e3ad222..b5e97a396a72 100644
--- a/tests/evaluateTailwindFunctions.test.js
+++ b/tests/evaluateTailwindFunctions.test.js
@@ -1025,6 +1025,36 @@ test('Theme function can extract alpha values for colors (8)', () => {
   })
 })
 
+test('Theme functions replace the alpha value placeholder even with no alpha provided', () => {
+  let input = css`
+    .foo {
+      background: theme(colors.blue.400);
+      color: theme(colors.blue.500);
+    }
+  `
+
+  let output = css`
+    .foo {
+      background: rgb(0 0 255 / 1);
+      color: rgb(var(--foo) / 1);
+    }
+  `
+
+  return runFull(input, {
+    theme: {
+      colors: {
+        blue: {
+          400: 'rgb(0 0 255 / <alpha-value>)',
+          500: 'rgb(var(--foo) / <alpha-value>)',
+        },
+      },
+    },
+  }).then((result) => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
 test('Theme functions can reference values with slashes in brackets', () => {
   let input = css`
     .foo1 {