Allow multiple @utility definitions with same name but different value types

packages/tailwindcss/src/compile.ts

@@ -287,7 +287,14 @@ function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) {
 
     let compiledNodes = utility.compileFn(candidate)
     if (compiledNodes === undefined) continue
-    if (compiledNodes === null) return asts
+    if (compiledNodes === null) {
+      // For typed plugin utilities (matchUtilities with explicit types),
+      // null means the value was invalid for this type - stop trying.
+      // For CSS @utility definitions (no types), null means the value
+      // didn't match this handler - try the next one.
+      if (utility.options?.types?.length) return asts
+      continue
+    }
     asts.push(compiledNodes)
   }
 
@@ -299,7 +306,10 @@ function compileBaseUtility(candidate: Candidate, designSystem: DesignSystem) {
 
     let compiledNodes = utility.compileFn(candidate)
     if (compiledNodes === undefined) continue
-    if (compiledNodes === null) return asts
+    if (compiledNodes === null) {
+      if (utility.options?.types?.length) return asts
+      continue
+    }
     asts.push(compiledNodes)
   }
 

packages/tailwindcss/src/utilities.test.ts

@@ -29979,4 +29979,38 @@ describe('custom utilities', () => {
       }"
     `)
   })
+
+  test('multiple @utility definitions with the same name but different value types', async () => {
+    let input = css`
+      @theme {
+        --color-red-500: #ef4444;
+        --spacing: 0.25rem;
+      }
+
+      @utility foo-* {
+        color: --value(--color-*);
+      }
+
+      @utility foo-* {
+        font-size: --spacing(--value(number));
+      }
+
+      @tailwind utilities;
+    `
+
+    expect(await compileCss(input, ['foo-red-500', 'foo-123'])).toMatchInlineSnapshot(`
+      ":root, :host {
+        --color-red-500: #ef4444;
+        --spacing: .25rem;
+      }
+
+      .foo-123 {
+        font-size: calc(var(--spacing) * 123);
+      }
+
+      .foo-red-500 {
+        color: var(--color-red-500);
+      }"
+    `)
+  })
 })