Use more modern --alpha(color / 50%) syntax (#15665)

This PR changes the syntax for the `--alpha(…)` function to look like
more modern CSS.

The arguments to apply an alpha to a color is using the `/` syntax
instead of the comma syntax.

```diff
- --alpha(color, 50%)
+ --alpha(color / 50%)
```

This syntax is now similar to modern `rgb(0 0 0 / 50%)` syntax in CSS.

Author: RobinMalfait

CHANGELOG.md

@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Write to `stdout` when `--output -` flag is used for `@tailwindcss/cli` ([#15656](https://github.com/tailwindlabs/tailwindcss/pull/15656))
 - _Upgrade (experimental)_: Pretty print `--spacing(…)` to prevent ambiguity ([#15596](https://github.com/tailwindlabs/tailwindcss/pull/15596))
 
+### Changed
+
+- Use more modern `--alpha(color / 50%)` syntax instead of `--alpha(color, 50%)` ([#15665](https://github.com/tailwindlabs/tailwindcss/pull/15665))
+
 ## [4.0.0-beta.9] - 2025-01-09
 
 ### Added

packages/tailwindcss/src/css-functions.test.ts

@@ -12,7 +12,7 @@ describe('--alpha(…)', () => {
     expect(
       await compileCss(css`
         .foo {
-          margin: --alpha(red, 50%);
+          margin: --alpha(red / 50%);
         }
       `),
     ).toMatchInlineSnapshot(`
@@ -30,7 +30,7 @@ describe('--alpha(…)', () => {
         }
       `),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function requires two arguments, e.g.: \`--alpha(var(--my-color), 50%)\`]`,
+      `[Error: The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(var(--my-color) / 50%)\`]`,
     )
   })
 
@@ -42,19 +42,19 @@ describe('--alpha(…)', () => {
         }
       `),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function requires two arguments, e.g.: \`--alpha(red, 50%)\`]`,
+      `[Error: The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(red / 50%)\`]`,
     )
   })
 
   test('--alpha(…) errors multiple arguments are used', async () => {
     expect(() =>
       compileCss(css`
         .foo {
-          margin: --alpha(red, 50%, blue);
+          margin: --alpha(red / 50%, blue);
         }
       `),
     ).rejects.toThrowErrorMatchingInlineSnapshot(
-      `[Error: The --alpha(…) function only accepts two arguments, e.g.: \`--alpha(red, 50%)\`]`,
+      `[Error: The --alpha(…) function only accepts one argument, e.g.: \`--alpha(red / 50%)\`]`,
     )
   })
 })

packages/tailwindcss/src/css-functions.ts

@@ -12,20 +12,22 @@ const functions: Record<string, (designSystem: DesignSystem, ...args: string[])
   theme: legacyTheme,
 }
 
-function alpha(_designSystem: DesignSystem, value: string, alpha: string, ...rest: string[]) {
-  if (!value || !alpha) {
+function alpha(_designSystem: DesignSystem, value: string, ...rest: string[]) {
+  let [color, alpha] = segment(value, '/').map((v) => v.trim())
+
+  if (!color || !alpha) {
     throw new Error(
-      `The --alpha(…) function requires two arguments, e.g.: \`--alpha(${value || 'var(--my-color)'}, ${alpha || '50%'})\``,
+      `The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
     )
   }
 
   if (rest.length > 0) {
     throw new Error(
-      `The --alpha(…) function only accepts two arguments, e.g.: \`--alpha(${value || 'var(--my-color)'}, ${alpha || '50%'})\``,
+      `The --alpha(…) function only accepts one argument, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
     )
   }
 
-  return withAlpha(value, alpha)
+  return withAlpha(color, alpha)
 }
 
 function spacing(designSystem: DesignSystem, value: string, ...rest: string[]) {