diff --git a/CHANGELOG.md b/CHANGELOG.md index 1645f7212e9e..37ad1a59cc60 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 128053f46cbf..e3747c7ba601 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/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,7 +42,7 @@ 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%)\`]`, ) }) @@ -50,11 +50,11 @@ describe('--alpha(…)', () => { 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%)\`]`, ) }) }) diff --git a/packages/tailwindcss/src/css-functions.ts b/packages/tailwindcss/src/css-functions.ts index bb27658c5929..ff986c6f6590 100644 --- a/packages/tailwindcss/src/css-functions.ts +++ b/packages/tailwindcss/src/css-functions.ts @@ -12,20 +12,22 @@ const functions: Record 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[]) {