diff --git a/src/lib/evaluateTailwindFunctions.js b/src/lib/evaluateTailwindFunctions.js
--- 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
--- 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 {

theme() with css variable colors doesn't work in .css files
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

v3.1.3

**What build tool (or framework if it abstracts the build tool) are you using?**

postcss 8.4.14

**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**

https://play.tailwindcss.com/eoS0xJO1cm

**Describe your issue**

If you use css variable for colors, then `theme` doesn't work in `.css` files:

```
module.exports = {
  theme: {
    colors: {
      blue: 'rgb(var(--blue) / <alpha-value>)',
    },
  },
  plugins: [],
}
```

```
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --blue: 0 0 255;
}

.custom-class {
  color: theme("colors.blue");
}
```

Generated css:
```
.custom-class {
    color: rgb(var(--blue) / <alpha-value>);
}
```

tests/evaluateTailwindFunctions.test.js