diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
--- 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.replace(/<alpha-value>/g, opacityValue)
   }
 
   return value

diff --git a/tests/opacity.test.js b/tests/opacity.test.js
--- 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: [

`<alpha-value>` is not recognized on reuse
**What version of Tailwind CSS are you using?**

v3.4.3 (last)

**Reproduction URL**

https://play.tailwindcss.com/iK3QZJynRz?file=config

**Describe your issue**

<img width="800" alt="image" src="https://github.com/tailwindlabs/tailwindcss/assets/625005/d43b6f8d-47a8-4994-8568-3767c0ce76cb">

Tailwind config
```
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
                                         ⬇⬇⬇⬇⬇⬇⬇⬇                     ⬇⬇⬇⬇⬇⬇⬇⬇
        primary: 'light-dark(rgb(0 0 0 / <alpha-value>), rgb(255 255 255 / <alpha-value>))',
      }
    },
  },
}
```

CSS
```
                              ⬇⬇                     ⬇⬇⬇⬇⬇⬇⬇⬇
color: light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / <alpha-value>));
```

When adding a color to a Tailwind setting with more than one use of `<alpha-value>` in a single value, only the first occurrence of `<alpha-value>` is recognized.

More information is available [here](https://github.com/tailwindlabs/tailwindcss/discussions/12172#discussioncomment-9236533) (сс @olyckne).

tests/opacity.test.js