Ensure default alpha is 1.0 when using new <alpha-value> format wit…

…h the theme function

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

tests/evaluateTailwindFunctions.test.js

@@ -1025,6 +1025,37 @@ 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 {
+      color: theme(colors.blue.500);
+    }
+  `
+
+  let output = css`
+    .foo {
+      color: rgb(var(--foo) / 1);
+    }
+  `
+
+  return runFull(input, {
+    theme: {
+      colors: {
+        blue: {
+          500: 'rgb(var(--foo) / <alpha-value>)',
+        },
+      },
+
+      opacity: {
+        myalpha: '50%',
+      },
+    },
+  }).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 {