diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb91cb4f7..eb3998061 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Discard invalid classes such as `bg-red-[#000]` ([#13970](https://github.com/tailwindlabs/tailwindcss/pull/13970))
 - Fix parsing body-less at-rule without terminating semicolon ([#13978](https://github.com/tailwindlabs/tailwindcss/pull/13978))
+- Ensure opacity modifier with variables work with `color-mix()` ([#13972](https://github.com/tailwindlabs/tailwindcss/pull/13972))
 
 ## [4.0.0-alpha.17] - 2024-07-04
 
diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index 3c8324d53..7e3e37347 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -7673,6 +7673,7 @@ test('bg', () => {
         'bg-current/50',
         'bg-current/[0.5]',
         'bg-current/[50%]',
+        'bg-current/[--bg-opacity]',
         'bg-inherit',
         'bg-transparent',
         'bg-[#0088cc]',
@@ -7792,7 +7793,15 @@ test('bg', () => {
       background-color: currentColor;
     }
 
-    .bg-current\\/50, .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
+    .bg-current\\/50 {
+      background-color: color-mix(in srgb, currentColor 50%, transparent);
+    }
+
+    .bg-current\\/\\[--bg-opacity\\] {
+      background-color: color-mix(in srgb, currentColor calc(var(--bg-opacity) * 100%), transparent);
+    }
+
+    .bg-current\\/\\[0\\.5\\], .bg-current\\/\\[50\\%\\] {
       background-color: color-mix(in srgb, currentColor 50%, transparent);
     }
 
@@ -8091,11 +8100,11 @@ test('bg', () => {
     }
 
     .bg-current\\/custom {
-      background-color: color-mix(in srgb, currentColor var(--opacity-custom, var(--custom-opacity)), transparent);
+      background-color: color-mix(in srgb, currentColor calc(var(--opacity-custom, var(--custom-opacity)) * 100%), transparent);
     }
 
     .bg-current\\/half {
-      background-color: color-mix(in srgb, currentColor var(--opacity-half, .5), transparent);
+      background-color: color-mix(in srgb, currentColor calc(var(--opacity-half, .5) * 100%), transparent);
     }"
   `)
 })
diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 58ad4c56d..8cc8d29bd 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -137,6 +137,13 @@ function withAlpha(value: string, alpha: string): string {
     alpha = `${alphaAsNumber * 100}%`
   }
 
+  // If the alpha value is a percentage, we can pass it directly to
+  // `color-mix()`. In any other case, e.g.: `var(…)`, `round(…)`, … we need to
+  // make sure it's a percentage.
+  else if (alpha[alpha.length - 1] !== '%') {
+    alpha = `calc(${alpha} * 100%)`
+  }
+
   return `color-mix(in srgb, ${value} ${alpha}, transparent)`
 }