From 69c263746b7ed745d93f3395244158ce7a7f290e Mon Sep 17 00:00:00 2001
From: Maxwell Barvian <max@barvian.me>
Date: Fri, 24 May 2024 18:25:34 -0500
Subject: [PATCH 1/3] Fix multiple <alpha-value> in color definitions

Fixes #13716
---
 src/util/pluginUtils.js |  2 +-
 tests/opacity.test.js   | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index 256d891a2150..b36e1fa35aa8 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('<alpha-value>')) {
     let oldValue = value
 
-    return ({ opacityValue = 1 }) => oldValue.replace('<alpha-value>', opacityValue)
+    return ({ opacityValue = 1 }) => oldValue.replaceAll('<alpha-value>', 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 <alpha-value> as part of the color definition w
   })
 })
 
+it('should be possible to use multiple <alpha-value>s as part of the color definition with an opacity modifiers', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="bg-primary/50"></div> `,
+      },
+    ],
+    corePlugins: ['backgroundColor'],
+    theme: {
+      colors: {
+        primary: 'light-dark(rgb(0 0 0 / <alpha-value>), rgb(255 255 255 / <alpha-value>))',
+      },
+    },
+  }
+
+  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 <alpha-value> as part of the color definition with an opacity modifiers', () => {
   let config = {
     content: [

From 9700fc1eaad1ea8a6a10753073d21e13bd3733ec Mon Sep 17 00:00:00 2001
From: Maxwell Barvian <max@barvian.me>
Date: Fri, 24 May 2024 18:32:14 -0500
Subject: [PATCH 2/3] Update CHANGELOG.md

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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 `<alpha-value>` placeholders in a single color definition ([#13740](https://github.com/tailwindlabs/tailwindcss/pull/13740))
 
 ## [3.4.3] - 2024-03-27
 

From 019219dfe08847597c3ebf007924091dca9aab23 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Wed, 29 May 2024 11:23:57 -0400
Subject: [PATCH 3/3] Use `replace` with global regex

---
 src/util/pluginUtils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
index b36e1fa35aa8..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('<alpha-value>')) {
     let oldValue = value
 
-    return ({ opacityValue = 1 }) => oldValue.replaceAll('<alpha-value>', opacityValue)
+    return ({ opacityValue = 1 }) => oldValue.replace(/<alpha-value>/g, opacityValue)
   }
 
   return value