diff --git a/CHANGELOG.md b/CHANGELOG.md index e58f1db75e54..55df105ee3c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Don’t prefix classes within reused arbitrary variants ([#8992](https://github.com/tailwindlabs/tailwindcss/pull/8992)) +- Fix usage of alpha values inside single-named colors that are functions ([#9008](https://github.com/tailwindlabs/tailwindcss/pull/9008)) ## [3.1.7] - 2022-07-29 diff --git a/src/util/resolveConfig.js b/src/util/resolveConfig.js index 5472da08876f..9a4845af5625 100644 --- a/src/util/resolveConfig.js +++ b/src/util/resolveConfig.js @@ -180,7 +180,7 @@ function resolveFunctionKeys(object) { val = val[path[index++]] let shouldResolveAsFn = - isFunction(val) && (path.alpha === undefined || index < path.length - 1) + isFunction(val) && (path.alpha === undefined || index <= path.length - 1) val = shouldResolveAsFn ? val(resolvePath, configUtils) : val } diff --git a/tests/opacity.test.js b/tests/opacity.test.js index 7215d14db332..c0cd3066e5ac 100644 --- a/tests/opacity.test.js +++ b/tests/opacity.test.js @@ -761,3 +761,70 @@ it('Theme functions can reference values with slashes in brackets', () => { `) }) }) + +it('works with opacity values defined as a placeholder or a function in when colors is a function', () => { + let config = { + content: [ + { + raw: html` +
+ `, + }, + ], + theme: { + colors: () => ({ + foobar1: ({ opacityValue }) => `rgb(255 100 0 / ${opacityValue ?? '100%'})`, + foobar2: `rgb(255 100 0 /