diff --git a/CHANGELOG.md b/CHANGELOG.md index 3294953c0e7d..783db8b39a73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Make it possible to use multiple `` placeholders in a single color definition ([#13740](https://github.com/tailwindlabs/tailwindcss/pull/13740)) ## [3.4.3] - 2024-03-27 diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js index 256d891a2150..8a71e16173b8 100644 --- a/src/util/pluginUtils.js +++ b/src/util/pluginUtils.js @@ -124,7 +124,7 @@ export function parseColorFormat(value) { if (typeof value === 'string' && value.includes('')) { let oldValue = value - return ({ opacityValue = 1 }) => oldValue.replace('', opacityValue) + return ({ opacityValue = 1 }) => oldValue.replace(//g, opacityValue) } return value diff --git a/tests/opacity.test.js b/tests/opacity.test.js index 8f688210cead..ac439daa43a9 100644 --- a/tests/opacity.test.js +++ b/tests/opacity.test.js @@ -673,6 +673,30 @@ it('should be possible to use an as part of the color definition w }) }) +it('should be possible to use multiple s as part of the color definition with an opacity modifiers', () => { + let config = { + content: [ + { + raw: html`
`, + }, + ], + corePlugins: ['backgroundColor'], + theme: { + colors: { + primary: 'light-dark(rgb(0 0 0 / ), rgb(255 255 255 / ))', + }, + }, + } + + return run('@tailwind utilities', config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .bg-primary\/50 { + background-color: light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / 0.5)); + } + `) + }) +}) + it('should be possible to use an as part of the color definition with an opacity modifiers', () => { let config = { content: [