Ensure --alpha(…) is seen as a color, and --spacing(…) is seen as a length (#20260)

This PR fixes an issue where intellisense recommends this
canonicalization:

```diff
- text-[calc(var(--spacing)*4)]
+ text-[--spacing(4)]
```

Which is correct, but the issue is that the result is different due to
ambiguity of the `text-*` utilities.

```css
.text-\[calc\(var\(--spacing\)\*4\)\] {
  font-size: calc(var(--spacing) * 4);
}
.text-\[--spacing\(4\)\] {
  color: calc(var(--spacing, 0.25rem) * 4);
}
```

Notice that we're using `color` all of a sudden? This is because that's
the default and we infer the data type based on the arbitrary value. The
`calc(…)` infers that the type is `length`, but we don't know what the
type of `--spacing(…)` is so we fallback to the default type which would
be `color`.

This PR makes sure that built in functions like `--alpha(…)` and
`--spacing(…)` are resolved as `color` and `length` respectively.

With this fix in place, this is the result:
```css
.text-\[calc\(var\(--spacing\)\*4\)\] {
  font-size: calc(var(--spacing) * 4);
}
.text-\[--spacing\(4\)\] {
  font-size: calc(var(--spacing, 0.25rem) * 4);
}
```


Fixes: #20256
Fixes: #20258

## Test plan

1. Added a regression test to make sure this doesn't happen anymore

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `@tailwindcss/cli` in `--watch` mode rebuilds when the input CSS file changes in an ignored directory ([#20246](https://github.com/tailwindlabs/tailwindcss/pull/20246))
 - Ensure `@variant` rules generated by `addBase` can use custom variants defined later ([#20247](https://github.com/tailwindlabs/tailwindcss/pull/20247))
 - Ensure `@tailwindcss/vite` doesn't crash during HMR when scanned files or directories are deleted ([#20259](https://github.com/tailwindlabs/tailwindcss/pull/20259))
+- Ensure `text-[--spacing(…)]` generates `font-size` instead of `color` ([#20260](https://github.com/tailwindlabs/tailwindcss/pull/20260))
 
 ## [4.3.1] - 2026-06-12
 

packages/tailwindcss/src/utilities.test.ts

@@ -26518,6 +26518,7 @@ test('text', async () => {
         'text-[color:var(--my-color)]/50',
         'text-[color:var(--my-color)]/[0.5]',
         'text-[color:var(--my-color)]/[50%]',
+        'text-[--alpha(red/20%)]',
 
         // font-size / line-height / letter-spacing / font-weight
         'text-sm',
@@ -26543,6 +26544,7 @@ test('text', async () => {
         'text-[clamp(1rem,2rem,3rem)]',
         'text-[clamp(1rem,var(--size),3rem)]',
         'text-[clamp(1rem,var(--size),3rem)]/9',
+        'text-[--spacing(2)]',
       ],
       css`
         @theme {
@@ -26632,6 +26634,10 @@ test('text', async () => {
       line-height: var(--leading-snug);
     }
 
+    .text-\\[--spacing\\(2\\)\\] {
+      font-size: calc(var(--spacing) * 2);
+    }
+
     .text-\\[12px\\] {
       font-size: 12px;
     }
@@ -26672,6 +26678,10 @@ test('text', async () => {
       color: oklab(59.9824% -.067 -.124 / .5);
     }
 
+    .text-\\[--alpha\\(red\\/20\\%\\)\\] {
+      color: oklab(62.7955% .224 .125 / .2);
+    }
+
     .text-\\[color\\:var\\(--my-color\\)\\], .text-\\[color\\:var\\(--my-color\\)\\]\\/50 {
       color: var(--my-color);
     }

packages/tailwindcss/src/utils/infer-data-type.ts

@@ -232,9 +232,10 @@ const LENGTH_UNITS = [
 ]
 
 const IS_LENGTH = new RegExp(`^${HAS_NUMBER.source}(${LENGTH_UNITS.join('|')})$`)
+const IS_LENGTH_FN = /^(--spacing)\(/i
 
 export function isLength(value: string): boolean {
-  return IS_LENGTH.test(value) || hasMathFn(value)
+  return IS_LENGTH.test(value) || IS_LENGTH_FN.test(value) || hasMathFn(value)
 }
 
 /* -------------------------------------------------------------------------- */

packages/tailwindcss/src/utils/is-color.ts

@@ -195,7 +195,7 @@ const NAMED_COLORS = new Set([
   'accentcolortext',
 ])
 
-const IS_COLOR_FN = /^(rgba?|hsla?|hwb|color|(ok)?(lab|lch)|light-dark|color-mix)\(/i
+const IS_COLOR_FN = /^(rgba?|hsla?|hwb|color|(ok)?(lab|lch)|light-dark|color-mix|--alpha)\(/i
 
 export function isColor(value: string): boolean {
   return (