diff --git a/CHANGELOG.md b/CHANGELOG.md
index 069428f6fb44..d3d46a4a172e 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
 
 - Bump versions for security vulnerabilities ([#14697](https://github.com/tailwindlabs/tailwindcss/pull/14697))
 - Ensure the TypeScript types for the `boxShadow` theme configuration allows arrays ([#14856](https://github.com/tailwindlabs/tailwindcss/pull/14856))
+- Set fallback for opacity variables to ensure setting colors with the `selection:*` variant works in Chrome 131 ([#15003](https://github.com/tailwindlabs/tailwindcss/pull/15003))
 
 ## [3.4.14] - 2024-10-15
 
diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js
index 9a9091a30589..beaf5e70d7dc 100644
--- a/integrations/parcel/tests/integration.test.js
+++ b/integrations/parcel/tests/integration.test.js
@@ -74,7 +74,7 @@ describe('static build', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
       .bg-primary {
         --tw-bg-opacity: 1;
-        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -124,7 +124,7 @@ describe('static build', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
       .bg-primary {
         --tw-bg-opacity: 1;
-        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -170,7 +170,7 @@ describe('watcher', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
       .bg-red-500 {
         --tw-bg-opacity: 1;
-        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
       }
       .font-bold {
         font-weight: 700;
@@ -218,7 +218,7 @@ describe('watcher', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
       .bg-red-500 {
         --tw-bg-opacity: 1;
-        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
       }
       .font-bold {
         font-weight: 700;
@@ -361,7 +361,7 @@ describe('watcher', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
       .btn {
         --tw-bg-opacity: 1;
-        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         border-radius: 0.25rem;
         padding: 0.25rem 0.5rem;
       }
diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js
index 964c57b82e39..08dd81baeab3 100644
--- a/integrations/postcss-cli/tests/integration.test.js
+++ b/integrations/postcss-cli/tests/integration.test.js
@@ -64,7 +64,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -113,7 +113,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -252,7 +252,7 @@ describe('watcher', () => {
         .btn {
           border-radius: 0.25rem;
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           padding-left: 0.5rem;
           padding-right: 0.5rem;
           padding-top: 0.25rem;
diff --git a/integrations/rollup-sass/tests/integration.test.js b/integrations/rollup-sass/tests/integration.test.js
index 8793784c6db6..98ace171ec82 100644
--- a/integrations/rollup-sass/tests/integration.test.js
+++ b/integrations/rollup-sass/tests/integration.test.js
@@ -64,7 +64,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -113,7 +113,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -249,7 +249,7 @@ describe('watcher', () => {
       css`
         .btn {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           border-radius: 0.25rem;
           padding: 0.25rem 0.5rem;
         }
@@ -329,7 +329,7 @@ describe('watcher', () => {
       css`
         .btn {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           border-radius: 0.25rem;
           padding: 0.25rem 0.5rem;
         }
diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js
index 86544ffe1ec0..30edc8a50d08 100644
--- a/integrations/rollup/tests/integration.test.js
+++ b/integrations/rollup/tests/integration.test.js
@@ -65,7 +65,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -111,7 +111,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -154,7 +154,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -203,7 +203,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -340,7 +340,7 @@ describe('watcher', () => {
         .btn {
           border-radius: 0.25rem;
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           padding-left: 0.5rem;
           padding-right: 0.5rem;
           padding-top: 0.25rem;
diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js
index a373b307a7c4..9795bd0d7018 100644
--- a/integrations/tailwindcss-cli/tests/cli.test.js
+++ b/integrations/tailwindcss-cli/tests/cli.test.js
@@ -262,7 +262,7 @@ describe('Build command', () => {
 
         .btn-after {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           padding-left: 0.5rem;
           padding-right: 0.5rem;
           padding-top: 0.25rem;
@@ -313,7 +313,7 @@ describe('Build command', () => {
 
         .btn-after {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           padding-left: 0.5rem;
           padding-right: 0.5rem;
           padding-top: 0.25rem;
diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
index 31b362353fbf..48d43fb41eeb 100644
--- a/integrations/tailwindcss-cli/tests/integration.test.js
+++ b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -75,12 +75,12 @@ describe('static build', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
 
         .bg-red-600 {
           --tw-bg-opacity: 1;
-          background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+          background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
         }
 
         .font-bold {
@@ -128,7 +128,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -176,7 +176,7 @@ describe('static build', () => {
         css`
           .bg-primary {
             --tw-bg-opacity: 1;
-            background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+            background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
           }
         `
       )
@@ -224,7 +224,7 @@ describe('static build', () => {
       css`
         .bg-yellow {
           --tw-bg-opacity: 1;
-          background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+          background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -279,7 +279,7 @@ describe('static build', () => {
       css`
         .bg-yellow {
           --tw-bg-opacity: 1;
-          background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+          background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -313,7 +313,7 @@ describe('static build', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -356,7 +356,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -405,7 +405,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -594,7 +594,7 @@ describe('watcher', () => {
         .btn {
           border-radius: 0.25rem;
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           padding-left: 0.5rem;
           padding-right: 0.5rem;
           padding-top: 0.25rem;
@@ -670,7 +670,7 @@ describe('watcher', () => {
       css`
         .bg-yellow {
           --tw-bg-opacity: 1;
-          background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+          background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -690,7 +690,7 @@ describe('watcher', () => {
       css`
         .bg-yellow {
           --tw-bg-opacity: 1;
-          background-color: rgb(255 255 119 / var(--tw-bg-opacity));
+          background-color: rgb(255 255 119 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -722,7 +722,7 @@ describe('watcher', () => {
       css`
         .bg-yellow {
           --tw-bg-opacity: 1;
-          background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+          background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
         }
       `
     )
diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js
index 1a3b1302b3a7..1001ff9c3903 100644
--- a/integrations/vite/tests/integration.test.js
+++ b/integrations/vite/tests/integration.test.js
@@ -78,7 +78,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -122,7 +122,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -173,7 +173,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -226,7 +226,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -379,7 +379,7 @@ describe('watcher', () => {
         .btn {
           border-radius: 0.25rem;
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           padding-left: 0.5rem;
           padding-right: 0.5rem;
           padding-top: 0.25rem;
diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js
index ae7cce0c8a2d..6e0b034f20ed 100644
--- a/integrations/webpack-4/tests/integration.test.js
+++ b/integrations/webpack-4/tests/integration.test.js
@@ -61,7 +61,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -105,7 +105,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -151,7 +151,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -203,7 +203,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -345,7 +345,7 @@ describe('watcher', () => {
         .btn {
           border-radius: 0.25rem;
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           padding-left: 0.5rem;
           padding-right: 0.5rem;
           padding-top: 0.25rem;
diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js
index 1a4a969a4a38..6209e0a5e900 100644
--- a/integrations/webpack-5/tests/integration.test.js
+++ b/integrations/webpack-5/tests/integration.test.js
@@ -61,7 +61,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -105,7 +105,7 @@ describe('static build', () => {
       css`
         .bg-primary {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       `
     )
@@ -151,7 +151,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -203,7 +203,7 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
         .font-bold {
           font-weight: 700;
@@ -345,7 +345,7 @@ describe('watcher', () => {
         .btn {
           border-radius: 0.25rem;
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
           padding-left: 0.5rem;
           padding-right: 0.5rem;
           padding-top: 0.25rem;
@@ -390,12 +390,12 @@ describe('watcher', () => {
       css`
         .bg-red-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+          background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
         }
 
         .bg-red-600 {
           --tw-bg-opacity: 1;
-          background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+          background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
         }
 
         .font-bold {
diff --git a/src/util/removeAlphaVariables.js b/src/util/removeAlphaVariables.js
index 76655bea2bbd..be9281812fb1 100644
--- a/src/util/removeAlphaVariables.js
+++ b/src/util/removeAlphaVariables.js
@@ -18,6 +18,8 @@ export function removeAlphaVariables(container, toRemove) {
     for (let varName of toRemove) {
       if (decl.value.includes(`/ var(${varName})`)) {
         decl.value = decl.value.replace(`/ var(${varName})`, '')
+      } else if (decl.value.includes(`/ var(${varName}, 1)`)) {
+        decl.value = decl.value.replace(`/ var(${varName}, 1)`, '')
       }
     }
   })
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index 15aedb73b66d..e49bd82567e1 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -21,7 +21,7 @@ export default function withAlphaVariable({ color, property, variable }) {
       [variable]: '1',
       ...Object.fromEntries(
         properties.map((p) => {
-          return [p, color({ opacityVariable: variable, opacityValue: `var(${variable})` })]
+          return [p, color({ opacityVariable: variable, opacityValue: `var(${variable}, 1)` })]
         })
       ),
     }
@@ -42,7 +42,7 @@ export default function withAlphaVariable({ color, property, variable }) {
     [variable]: '1',
     ...Object.fromEntries(
       properties.map((p) => {
-        return [p, formatColor({ ...parsed, alpha: `var(${variable})` })]
+        return [p, formatColor({ ...parsed, alpha: `var(${variable}, 1)` })]
       })
     ),
   }
diff --git a/tests/apply.test.js b/tests/apply.test.js
index 6576241bfdeb..d9cc8ec82177 100644
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -161,7 +161,7 @@ test('@apply', () => {
     expect(result.css).toMatchFormattedCss(css`
       .basic-example {
         --tw-bg-opacity: 1;
-        background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+        background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
         border-radius: 0.375rem;
         padding: 0.5rem 1rem;
       }
@@ -243,7 +243,7 @@ test('@apply', () => {
       .multiple,
       .selectors {
         --tw-bg-opacity: 1;
-        background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+        background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
         border-radius: 0.375rem;
         padding: 0.5rem 1rem;
       }
@@ -307,16 +307,16 @@ test('@apply', () => {
       }
       .btn-blue {
         --tw-bg-opacity: 1;
-        background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+        background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
         --tw-text-opacity: 1;
-        color: rgb(255 255 255 / var(--tw-text-opacity));
+        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
         border-radius: 0.25rem;
         padding: 0.5rem 1rem;
         font-weight: 700;
       }
       .btn-blue:hover {
         --tw-bg-opacity: 1;
-        background-color: rgb(29 78 216 / var(--tw-bg-opacity));
+        background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
       }
       .recursive-apply-a {
         font-weight: 900;
@@ -651,22 +651,22 @@ test('@apply classes from outside a @layer', async () => {
       }
       .bar {
         --tw-text-opacity: 1;
-        color: rgb(239 68 68 / var(--tw-text-opacity));
+        color: rgb(239 68 68 / var(--tw-text-opacity, 1));
         font-weight: 700;
       }
       .bar:hover {
         --tw-text-opacity: 1;
-        color: rgb(34 197 94 / var(--tw-text-opacity));
+        color: rgb(34 197 94 / var(--tw-text-opacity, 1));
       }
       .baz {
         --tw-text-opacity: 1;
-        color: rgb(239 68 68 / var(--tw-text-opacity));
+        color: rgb(239 68 68 / var(--tw-text-opacity, 1));
         font-weight: 700;
         text-decoration-line: underline;
       }
       .baz:hover {
         --tw-text-opacity: 1;
-        color: rgb(34 197 94 / var(--tw-text-opacity));
+        color: rgb(34 197 94 / var(--tw-text-opacity, 1));
       }
       .keep-me-even-though-I-am-not-used-in-content {
         color: green;
@@ -891,7 +891,7 @@ it('should not throw when the selector is different (but contains the base parti
       .bg-gray-500,
       .focus\:bg-gray-500 {
         --tw-bg-opacity: 1;
-        background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+        background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -1444,13 +1444,13 @@ describe('multiple instances', () => {
         .a {
           color: red;
           --tw-text-opacity: 1;
-          color: rgb(34 197 94 / var(--tw-text-opacity));
+          color: rgb(34 197 94 / var(--tw-text-opacity, 1));
           color: #00f;
           text-decoration: underline;
         }
         .b {
           --tw-text-opacity: 1;
-          color: rgb(34 197 94 / var(--tw-text-opacity));
+          color: rgb(34 197 94 / var(--tw-text-opacity, 1));
           text-decoration: underline;
         }
       `)
@@ -1567,7 +1567,7 @@ it('should work outside of layer', async () => {
   expect(result.css).toMatchFormattedCss(css`
     .input-text {
       --tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
       background-color: red;
     }
   `)
@@ -1577,7 +1577,7 @@ it('should work outside of layer', async () => {
   expect(result.css).toMatchFormattedCss(css`
     .input-text {
       --tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
       background-color: red;
     }
   `)
@@ -1605,7 +1605,7 @@ it('should work in layer', async () => {
   expect(result.css).toMatchFormattedCss(css`
     .input-text {
       --tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
       background-color: red;
     }
   `)
@@ -1644,14 +1644,14 @@ it('apply partitioning works with media queries', async () => {
     html,
     body {
       --tw-text-opacity: 1;
-      color: rgb(22 163 74 / var(--tw-text-opacity));
+      color: rgb(22 163 74 / var(--tw-text-opacity, 1));
       font-size: 1rem;
     }
     @media print {
       html,
       body {
         --tw-text-opacity: 1;
-        color: rgb(220 38 38 / var(--tw-text-opacity));
+        color: rgb(220 38 38 / var(--tw-text-opacity, 1));
         font-size: 2rem;
       }
     }
@@ -1978,7 +1978,7 @@ it('should maintain the correct selector when applying other utilities', () => {
       .foo:hover.bar .baz,
       .foo:hover.bar > .baz {
         --tw-bg-opacity: 1;
-        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         color: red;
       }
     `)
@@ -2233,19 +2233,19 @@ test('applying classes with class-based dark variant to pseudo elements', async
   expect(result.css).toMatchFormattedCss(css`
     ::-webkit-scrollbar-track {
       --tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     }
     :is(.dark *)::-webkit-scrollbar-track {
       --tw-bg-opacity: 1;
-      background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+      background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
     }
     ::-webkit-scrollbar-track:hover {
       --tw-bg-opacity: 1;
-      background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+      background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
     }
     :is(.dark *)::-webkit-scrollbar-track:hover {
       --tw-bg-opacity: 1;
-      background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+      background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
     }
   `)
 })
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 32d7110828a8..cc64391f1f50 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -134,13 +134,13 @@
   min-height: var(--height);
 }
 .w-\[\'\)\(\)\'\] {
-  width: ")()";
+  width: ')()';
 }
 .w-\[\'\]\[\]\'\] {
-  width: "][]";
+  width: '][]';
 }
 .w-\[\'\}\{\}\'\] {
-  width: "}{}";
+  width: '}{}';
 }
 .w-\[\(\(\)\)\] {
   width: (());
@@ -353,7 +353,7 @@
   cursor: pointer;
 }
 .cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\2c pointer\] {
-  cursor: url("./path_to_hand.cur") 2 2, pointer;
+  cursor: url('./path_to_hand.cur') 2 2, pointer;
 }
 .cursor-\[url\(hand\.cur\)_2_2\2c pointer\] {
   cursor: url(hand.cur) 2 2, pointer;
@@ -414,7 +414,7 @@
   scroll-padding-top: var(--scroll-padding);
 }
 .list-\[\'\\1f44d\'\] {
-  list-style-type: "\1f44d";
+  list-style-type: '\1f44d';
 }
 .list-\[var\(--value\)\] {
   list-style-type: var(--value);
@@ -506,7 +506,7 @@
 }
 .divide-\[black\] > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-divide-opacity));
+  border-color: rgb(0 0 0 / var(--tw-divide-opacity, 1));
 }
 .divide-\[var\(--value\)\] > :not([hidden]) ~ :not([hidden]) {
   border-color: var(--value);
@@ -580,7 +580,7 @@
 }
 .border-\[\#f00\] {
   --tw-border-opacity: 1;
-  border-color: rgb(255 0 0 / var(--tw-border-opacity));
+  border-color: rgb(255 0 0 / var(--tw-border-opacity, 1));
 }
 .border-\[color\:var\(--value\)\] {
   border-color: var(--value);
@@ -590,28 +590,28 @@
 }
 .border-b-\[\#f00\] {
   --tw-border-opacity: 1;
-  border-bottom-color: rgb(255 0 0 / var(--tw-border-opacity));
+  border-bottom-color: rgb(255 0 0 / var(--tw-border-opacity, 1));
 }
 .border-b-\[color\:var\(--value\)\] {
   border-bottom-color: var(--value);
 }
 .border-l-\[\#f00\] {
   --tw-border-opacity: 1;
-  border-left-color: rgb(255 0 0 / var(--tw-border-opacity));
+  border-left-color: rgb(255 0 0 / var(--tw-border-opacity, 1));
 }
 .border-l-\[color\:var\(--value\)\] {
   border-left-color: var(--value);
 }
 .border-r-\[\#f00\] {
   --tw-border-opacity: 1;
-  border-right-color: rgb(255 0 0 / var(--tw-border-opacity));
+  border-right-color: rgb(255 0 0 / var(--tw-border-opacity, 1));
 }
 .border-r-\[color\:var\(--value\)\] {
   border-right-color: var(--value);
 }
 .border-t-\[\#f00\] {
   --tw-border-opacity: 1;
-  border-top-color: rgb(255 0 0 / var(--tw-border-opacity));
+  border-top-color: rgb(255 0 0 / var(--tw-border-opacity, 1));
 }
 .border-t-\[color\:var\(--value\)\] {
   border-top-color: var(--value);
@@ -627,25 +627,25 @@
 }
 .bg-\[\#0f0\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 255 0 / var(--tw-bg-opacity));
+  background-color: rgb(0 255 0 / var(--tw-bg-opacity, 1));
 }
 .bg-\[\#0f0_var\(--value\)\] {
   background-color: #0f0 var(--value);
 }
 .bg-\[\#ff0000\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+  background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
 }
 .bg-\[color\:var\(--value1\)_var\(--value2\)\] {
   background-color: var(--value1) var(--value2);
 }
 .bg-\[hsl\(0\2c 100\%\2c 50\%\)\] {
   --tw-bg-opacity: 1;
-  background-color: hsl(0 100% 50% / var(--tw-bg-opacity));
+  background-color: hsl(0 100% 50% / var(--tw-bg-opacity, 1));
 }
 .bg-\[hsl\(0rad\2c 100\%\2c 50\%\)\] {
   --tw-bg-opacity: 1;
-  background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity));
+  background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity, 1));
 }
 .bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] {
   background-color: hsla(0, 100%, 50%, 0.3);
@@ -655,14 +655,14 @@
 }
 .bg-\[rgb\(123\2c 123\2c 123\)\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(123 123 123 / var(--tw-bg-opacity));
+  background-color: rgb(123 123 123 / var(--tw-bg-opacity, 1));
 }
 .bg-\[rgb\(123\2c _456\2c _123\)_black\] {
   background-color: rgb(123, 456, 123) black;
 }
 .bg-\[rgb\(123_456_789\)\] {
   --tw-bg-opacity: 1;
-  background-color: rgb(123 456 789 / var(--tw-bg-opacity));
+  background-color: rgb(123 456 789 / var(--tw-bg-opacity, 1));
 }
 .bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] {
   background-color: rgba(123, 123, 123, 0.5);
@@ -704,7 +704,7 @@
   background-image: repeating-conic-gradient(#f8f9fa 0% 25%, white 0% 50%);
 }
 .bg-\[url\(\'\/path-to-image\.png\'\)\] {
-  background-image: url("/path-to-image.png");
+  background-image: url('/path-to-image.png');
 }
 .bg-\[url\:var\(--url\)\] {
   background-image: var(--url);
@@ -819,16 +819,16 @@
   vertical-align: 10em;
 }
 .font-\[\'Gill_Sans\'\] {
-  font-family: "Gill Sans";
+  font-family: 'Gill Sans';
 }
 .font-\[\'Some_Font\'\2c \'Some_Other_Font\'\] {
-  font-family: "Some Font", "Some Other Font";
+  font-family: 'Some Font', 'Some Other Font';
 }
 .font-\[\'Some_Font\'\2c sans-serif\] {
-  font-family: "Some Font", sans-serif;
+  font-family: 'Some Font', sans-serif;
 }
 .font-\[\'Some_Font\'\2c var\(--other-font\)\] {
-  font-family: "Some Font", var(--other-font);
+  font-family: 'Some Font', var(--other-font);
 }
 .font-\[Georgia\2c serif\] {
   font-family: Georgia, serif;
@@ -874,22 +874,22 @@
 }
 .text-\[black\] {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
 .text-\[color\:var\(--color\)\] {
   color: var(--color);
 }
 .text-\[rgb\(123\2c 123\2c 123\)\] {
   --tw-text-opacity: 1;
-  color: rgb(123 123 123 / var(--tw-text-opacity));
+  color: rgb(123 123 123 / var(--tw-text-opacity, 1));
 }
 .text-\[rgb\(123\2c _123\2c _123\)\] {
   --tw-text-opacity: 1;
-  color: rgb(123 123 123 / var(--tw-text-opacity));
+  color: rgb(123 123 123 / var(--tw-text-opacity, 1));
 }
 .text-\[rgb\(123_123_123\)\] {
   --tw-text-opacity: 1;
-  color: rgb(123 123 123 / var(--tw-text-opacity));
+  color: rgb(123 123 123 / var(--tw-text-opacity, 1));
 }
 .text-opacity-\[0\.8\] {
   --tw-text-opacity: 0.8;
@@ -985,7 +985,7 @@
 }
 .ring-\[\#76ad65\] {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(118 173 101 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(118 173 101 / var(--tw-ring-opacity, 1));
 }
 .ring-\[color\:var\(--value\)\] {
   --tw-ring-color: var(--value);
@@ -1055,81 +1055,90 @@
 }
 .backdrop-blur-\[11px\] {
   --tw-backdrop-blur: blur(11px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-brightness-\[1\.23\] {
   --tw-backdrop-brightness: brightness(1.23);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-contrast-\[0\.87\] {
   --tw-backdrop-contrast: contrast(0.87);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-grayscale-\[0\.42\] {
   --tw-backdrop-grayscale: grayscale(0.42);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-hue-rotate-\[1\.57rad\] {
   --tw-backdrop-hue-rotate: hue-rotate(1.57rad);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-invert-\[0\.66\] {
   --tw-backdrop-invert: invert(0.66);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-opacity-\[22\%\] {
   --tw-backdrop-opacity: opacity(22%);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-saturate-\[144\%\] {
   --tw-backdrop-saturate: saturate(144%);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .backdrop-sepia-\[0\.38\] {
   --tw-backdrop-sepia: sepia(0.38);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+    var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+    var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
     var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
     var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -1155,11 +1164,11 @@
   will-change: var(--will-change);
 }
 .content-\[\'\>\'\] {
-  --tw-content: ">";
+  --tw-content: '>';
   content: var(--tw-content);
 }
 .content-\[\'hello\'\] {
-  --tw-content: "hello";
+  --tw-content: 'hello';
   content: var(--tw-content);
 }
 .content-\[attr\(content-before\)\] {
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index bdb81397ce2f..594980803235 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -80,7 +80,7 @@ it('should support arbitrary values for various background utilities', () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-\[\#ff0000\] {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
       }
       .bg-\[color\:var\(--bg-color\)\] {
         background-color: var(--bg-color);
@@ -93,7 +93,7 @@ it('should support arbitrary values for various background utilities', () => {
       }
       .bg-red-500 {
         --tw-bg-opacity: 1;
-        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
       }
       .bg-\[url\(\'\/image-1-0\.png\'\)\] {
         background-image: url('/image-1-0.png');
diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js
index c60bb92ad307..fce5f0576e17 100644
--- a/tests/arbitrary-variants.test.js
+++ b/tests/arbitrary-variants.test.js
@@ -567,7 +567,7 @@ test('classes in arbitrary variants should not be prefixed', () => {
       .hover\:\[\&_\.foo\]\:tw-text-red-400 .foo:hover,
       .foo .\[\.foo_\&\]\:tw-text-red-400 {
         --tw-text-opacity: 1;
-        color: rgb(248 113 113 / var(--tw-text-opacity));
+        color: rgb(248 113 113 / var(--tw-text-opacity, 1));
       }
     `)
   })
@@ -601,19 +601,19 @@ test('classes in the same arbitrary variant should not be prefixed', () => {
     expect(result.css).toMatchFormattedCss(css`
       .\[\&_\.foo\]\:tw-bg-white .foo {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
       }
       .\[\&_\.foo\]\:tw-text-red-400 .foo {
         --tw-text-opacity: 1;
-        color: rgb(248 113 113 / var(--tw-text-opacity));
+        color: rgb(248 113 113 / var(--tw-text-opacity, 1));
       }
       .foo .\[\.foo_\&\]\:tw-bg-white {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
       }
       .foo .\[\.foo_\&\]\:tw-text-red-400 {
         --tw-text-opacity: 1;
-        color: rgb(248 113 113 / var(--tw-text-opacity));
+        color: rgb(248 113 113 / var(--tw-text-opacity, 1));
       }
     `)
   })
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 57b887d6d4b6..9e92cb9c75d2 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -570,7 +570,7 @@
 }
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
 }
 .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 0.5;
@@ -644,40 +644,40 @@
 }
 .border-black {
   --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 .border-x-black {
   --tw-border-opacity: 1;
-  border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
-  border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-left-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+  border-right-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 .border-y-black {
   --tw-border-opacity: 1;
-  border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
-  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
+  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 .border-b-black {
   --tw-border-opacity: 1;
-  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 .border-l-black {
   --tw-border-opacity: 1;
-  border-left-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-left-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 .border-r-black {
   --tw-border-opacity: 1;
-  border-right-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-right-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 .border-t-black {
   --tw-border-opacity: 1;
-  border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 .border-opacity-10 {
   --tw-border-opacity: 0.1;
 }
 .bg-green-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
 }
 .bg-opacity-20 {
   --tw-bg-opacity: 0.2;
@@ -831,7 +831,7 @@
 }
 .text-indigo-500 {
   --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
+  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
 }
 .text-opacity-10 {
   --tw-text-opacity: 0.1;
@@ -863,7 +863,7 @@
 }
 .placeholder-green-300::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgb(134 239 172 / var(--tw-placeholder-opacity));
+  color: rgb(134 239 172 / var(--tw-placeholder-opacity, 1));
 }
 .placeholder-opacity-60::placeholder {
   --tw-placeholder-opacity: 0.6;
@@ -958,7 +958,7 @@
 }
 .ring-white {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
 }
 .ring-opacity-40 {
   --tw-ring-opacity: 0.4;
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
index a65db81e24d4..06406306c65e 100644
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -243,7 +243,7 @@ test('all plugins are executed that match a candidate', () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-green-light {
         --tw-bg-opacity: 1;
-        background-color: rgb(0 128 0 / var(--tw-bg-opacity));
+        background-color: rgb(0 128 0 / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -291,11 +291,11 @@ test('per-plugin colors with the same key can differ when using a custom colors
     expect(result.css).toMatchFormattedCss(css`
       .bg-theme {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
       }
       .text-theme {
         --tw-text-opacity: 1;
-        color: rgb(0 128 0 / var(--tw-text-opacity));
+        color: rgb(0 128 0 / var(--tw-text-opacity, 1));
       }
     `)
   })
@@ -858,7 +858,7 @@ it('Ring color utilities are generated when using respectDefaultRingColorOpacity
       }
       .ring-blue-500 {
         --tw-ring-opacity: 1;
-        --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+        --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
       }
     `)
   })
diff --git a/tests/blocklist.test.js b/tests/blocklist.test.js
index e9915350f9e7..a9da1b2ed7b1 100644
--- a/tests/blocklist.test.js
+++ b/tests/blocklist.test.js
@@ -76,7 +76,7 @@ it('blocklists do NOT support regexes', async () => {
   expect(result.css).toMatchFormattedCss(css`
     .bg-\[\#f00d1e\] {
       --tw-bg-opacity: 1;
-      background-color: rgb(240 13 30 / var(--tw-bg-opacity));
+      background-color: rgb(240 13 30 / var(--tw-bg-opacity, 1));
     }
     .font-bold {
       font-weight: 700;
@@ -97,7 +97,7 @@ it('can block classes generated by the safelist', () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-red-400 {
         --tw-bg-opacity: 1;
-        background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+        background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
       }
       .font-bold {
         font-weight: 700;
diff --git a/tests/collapse-adjacent-rules.test.js b/tests/collapse-adjacent-rules.test.js
index 81411b02ec5e..933558afc507 100644
--- a/tests/collapse-adjacent-rules.test.js
+++ b/tests/collapse-adjacent-rules.test.js
@@ -102,14 +102,14 @@ test('collapse adjacent rules', () => {
       @supports (foo: bar) {
         .some-apply-thing {
           --tw-text-opacity: 1;
-          color: rgb(0 0 0 / var(--tw-text-opacity));
+          color: rgb(0 0 0 / var(--tw-text-opacity, 1));
           font-weight: 700;
         }
       }
       @media (min-width: 768px) {
         .some-apply-thing {
           --tw-text-opacity: 1;
-          color: rgb(0 0 0 / var(--tw-text-opacity));
+          color: rgb(0 0 0 / var(--tw-text-opacity, 1));
           font-weight: 700;
         }
       }
@@ -117,7 +117,7 @@ test('collapse adjacent rules', () => {
         @media (min-width: 768px) {
           .some-apply-thing {
             --tw-text-opacity: 1;
-            color: rgb(0 0 0 / var(--tw-text-opacity));
+            color: rgb(0 0 0 / var(--tw-text-opacity, 1));
             font-weight: 700;
           }
         }
diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js
index a4600a495bdb..1d34084b49ed 100644
--- a/tests/color-opacity-modifiers.test.js
+++ b/tests/color-opacity-modifiers.test.js
@@ -30,7 +30,7 @@ test('colors with slashes are matched first', async () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-red-500\/50 {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -207,21 +207,21 @@ test('opacity modifier in combination with partial custom properties', async ()
     expect(result.css).toMatchFormattedCss(css`
       .bg-\[hsl\(123\,50\%\,var\(--foo\)\)\] {
         --tw-bg-opacity: 1;
-        background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity));
+        background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity, 1));
       }
       .bg-\[hsl\(123\,50\%\,var\(--foo\)\)\]\/50 {
         background-color: hsl(123 50% var(--foo) / 0.5);
       }
       .bg-\[hsl\(123\,var\(--foo\)\,50\%\)\] {
         --tw-bg-opacity: 1;
-        background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity));
+        background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity, 1));
       }
       .bg-\[hsl\(123\,var\(--foo\)\,50\%\)\]\/50 {
         background-color: hsl(123 var(--foo) 50% / 0.5);
       }
       .bg-\[hsl\(var\(--foo\)\,50\%\,50\%\)\] {
         --tw-bg-opacity: 1;
-        background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity));
+        background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity, 1));
       }
       .bg-\[hsl\(var\(--foo\)\,50\%\,50\%\)\]\/50 {
         background-color: hsl(var(--foo) 50% 50% / 0.5);
diff --git a/tests/context-reuse.test.js b/tests/context-reuse.test.js
index 7cd006cde4a8..0c76859762f0 100644
--- a/tests/context-reuse.test.js
+++ b/tests/context-reuse.test.js
@@ -52,14 +52,14 @@ test('re-uses the context across multiple files with the same config', async ()
   expect(results[1].css).toMatchFormattedCss(css`
     body {
       --tw-bg-opacity: 1;
-      background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+      background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
     }
   `)
 
   expect(results[2].css).toMatchFormattedCss(css`
     body {
       --tw-text-opacity: 1;
-      color: rgb(248 113 113 / var(--tw-text-opacity));
+      color: rgb(248 113 113 / var(--tw-text-opacity, 1));
     }
   `)
 
diff --git a/tests/custom-extractors.test.js b/tests/custom-extractors.test.js
index f5933b7a595e..6b6cdf2cc433 100644
--- a/tests/custom-extractors.test.js
+++ b/tests/custom-extractors.test.js
@@ -13,11 +13,11 @@ let sharedHtml = html`
 let expected = css`
   .bg-white {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
   }
   .text-indigo-500 {
     --tw-text-opacity: 1;
-    color: rgb(99 102 241 / var(--tw-text-opacity));
+    color: rgb(99 102 241 / var(--tw-text-opacity, 1));
   }
 `
 
diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js
index 14585f4e3bd8..ff37f9fd8606 100644
--- a/tests/dark-mode.test.js
+++ b/tests/dark-mode.test.js
@@ -179,16 +179,16 @@ it('should use legacy sorting when using `darkMode: class`', () => {
     expect(result.css).toMatchFormattedCss(css`
       .hover\:text-green-200:hover {
         --tw-text-opacity: 1;
-        color: rgb(187 247 208 / var(--tw-text-opacity));
+        color: rgb(187 247 208 / var(--tw-text-opacity, 1));
       }
       .dark\:text-green-100:is(.dark *) {
         --tw-text-opacity: 1;
-        color: rgb(220 252 231 / var(--tw-text-opacity));
+        color: rgb(220 252 231 / var(--tw-text-opacity, 1));
       }
       @media (min-width: 1024px) {
         .lg\:text-green-300 {
           --tw-text-opacity: 1;
-          color: rgb(134 239 172 / var(--tw-text-opacity));
+          color: rgb(134 239 172 / var(--tw-text-opacity, 1));
         }
       }
     `)
@@ -214,17 +214,17 @@ it('should use modern sorting otherwise', () => {
     expect(result.css).toMatchFormattedCss(css`
       .hover\:text-green-200:hover {
         --tw-text-opacity: 1;
-        color: rgb(187 247 208 / var(--tw-text-opacity));
+        color: rgb(187 247 208 / var(--tw-text-opacity, 1));
       }
       @media (min-width: 1024px) {
         .lg\:text-green-300 {
           --tw-text-opacity: 1;
-          color: rgb(134 239 172 / var(--tw-text-opacity));
+          color: rgb(134 239 172 / var(--tw-text-opacity, 1));
         }
       }
       .dark\:text-green-100:where(.dark, .dark *) {
         --tw-text-opacity: 1;
-        color: rgb(220 252 231 / var(--tw-text-opacity));
+        color: rgb(220 252 231 / var(--tw-text-opacity, 1));
       }
     `)
   })
diff --git a/tests/import-syntax.test.js b/tests/import-syntax.test.js
index a0f38c3fe777..eac1a752e04f 100644
--- a/tests/import-syntax.test.js
+++ b/tests/import-syntax.test.js
@@ -70,7 +70,7 @@ test('using @import instead of @tailwind', () => {
       }
       .bg-black {
         --tw-bg-opacity: 1;
-        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
       }
       @media (min-width: 768px) {
         .md\:hover\:text-center:hover {
diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js
index bc41ecfceb4d..c6f4a08e925f 100644
--- a/tests/important-selector.test.js
+++ b/tests/important-selector.test.js
@@ -196,7 +196,7 @@ test('pseudo-elements are appended after the `:is()`', () => {
       #app .dark\:before\:bg-black:where(.dark, .dark *)::before {
         content: var(--tw-content);
         --tw-bg-opacity: 1;
-        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
       }
     `)
   })
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
index e37fc5164e6b..20f030d127da 100644
--- a/tests/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -253,7 +253,7 @@ test('it works', () => {
       }
       .apply-test {
         --tw-bg-opacity: 1;
-        background-color: rgb(236 72 153 / var(--tw-bg-opacity));
+        background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
         margin-top: 1.5rem;
       }
       .apply-test:hover,
@@ -263,11 +263,11 @@ test('it works', () => {
       @media (min-width: 640px) {
         .apply-test {
           --tw-bg-opacity: 1;
-          background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+          background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
         }
         .apply-test:nth-child(2n):focus {
           --tw-bg-opacity: 1;
-          background-color: rgb(251 207 232 / var(--tw-bg-opacity));
+          background-color: rgb(251 207 232 / var(--tw-bg-opacity, 1));
         }
       }
       .apply-components {
@@ -315,7 +315,7 @@ test('it works', () => {
       @media (min-width: 640px) {
         .apply-with-existing:hover {
           --tw-bg-opacity: 1;
-          background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+          background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
         }
       }
       .multiple,
@@ -343,7 +343,7 @@ test('it works', () => {
       }
       .group:hover .apply-dark-group-example-a:where(.dark, .dark *) {
         --tw-bg-opacity: 1;
-        background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+        background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
       }
       @media (min-width: 640px) {
         @media (prefers-reduced-motion: no-preference) {
@@ -499,23 +499,23 @@ test('it works', () => {
       }
       .border-black {
         --tw-border-opacity: 1;
-        border-color: rgb(0 0 0 / var(--tw-border-opacity));
+        border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
       }
       .border-e-red-400 {
         --tw-border-opacity: 1;
-        border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity));
+        border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
       }
       .border-s-green-500 {
         --tw-border-opacity: 1;
-        border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity));
+        border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
       }
       .bg-black {
         --tw-bg-opacity: 1;
-        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
       }
       .bg-green-500 {
         --tw-bg-opacity: 1;
-        background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+        background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
       }
       .bg-opacity-50 {
         --tw-bg-opacity: 0.5;
@@ -701,7 +701,7 @@ test('it works', () => {
       }
       .focus\:ring-blue-500:focus {
         --tw-ring-opacity: 1;
-        --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+        --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
       }
       .focus\:hover\:font-light:hover:focus {
         font-weight: 300;
diff --git a/tests/match-variants.test.js b/tests/match-variants.test.js
index 2923b10c0dc2..6eb83ac49e2e 100644
--- a/tests/match-variants.test.js
+++ b/tests/match-variants.test.js
@@ -29,7 +29,7 @@ test('partial arbitrary variants', () => {
       }
       .potato-yellow .potato-\[yellow\]\:bg-yellow-200 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+        background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -64,7 +64,7 @@ test('partial arbitrary variants with at-rules', () => {
       @media (potato: yellow) {
         .potato-\[yellow\]\:bg-yellow-200 {
           --tw-bg-opacity: 1;
-          background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+          background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
         }
       }
     `)
@@ -100,7 +100,7 @@ test('partial arbitrary variants with at-rules and placeholder', () => {
       @media (potato: yellow) {
         .potato-\[yellow\]\:bg-yellow-200:potato {
           --tw-bg-opacity: 1;
-          background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+          background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
         }
       }
     `)
diff --git a/tests/opacity.test.js b/tests/opacity.test.js
index ac439daa43a9..0e4f1f8c5fe0 100644
--- a/tests/opacity.test.js
+++ b/tests/opacity.test.js
@@ -119,42 +119,42 @@ it('can use <alpha-value> defining custom properties for colors (opacity plugins
     expect(result.css).toMatchFormattedCss(css`
       .divide-primary > :not([hidden]) ~ :not([hidden]) {
         --tw-divide-opacity: 1;
-        border-color: rgb(var(--color-primary) / var(--tw-divide-opacity));
+        border-color: rgb(var(--color-primary) / var(--tw-divide-opacity, 1));
       }
       .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
         --tw-divide-opacity: 0.5;
       }
       .border-primary {
         --tw-border-opacity: 1;
-        border-color: rgb(var(--color-primary) / var(--tw-border-opacity));
+        border-color: rgb(var(--color-primary) / var(--tw-border-opacity, 1));
       }
       .border-opacity-50 {
         --tw-border-opacity: 0.5;
       }
       .bg-primary {
         --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
+        background-color: rgb(var(--color-primary) / var(--tw-bg-opacity, 1));
       }
       .bg-opacity-50 {
         --tw-bg-opacity: 0.5;
       }
       .text-primary {
         --tw-text-opacity: 1;
-        color: rgb(var(--color-primary) / var(--tw-text-opacity));
+        color: rgb(var(--color-primary) / var(--tw-text-opacity, 1));
       }
       .text-opacity-50 {
         --tw-text-opacity: 0.5;
       }
       .placeholder-primary::placeholder {
         --tw-placeholder-opacity: 1;
-        color: rgb(var(--color-primary) / var(--tw-placeholder-opacity));
+        color: rgb(var(--color-primary) / var(--tw-placeholder-opacity, 1));
       }
       .placeholder-opacity-50::placeholder {
         --tw-placeholder-opacity: 0.5;
       }
       .ring-primary {
         --tw-ring-opacity: 1;
-        --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity));
+        --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity, 1));
       }
       .ring-opacity-50 {
         --tw-ring-opacity: 0.5;
@@ -271,42 +271,42 @@ it('can use hsl helper when defining custom properties for colors (opacity plugi
     expect(result.css).toMatchFormattedCss(css`
       .divide-primary > :not([hidden]) ~ :not([hidden]) {
         --tw-divide-opacity: 1;
-        border-color: hsl(var(--color-primary) / var(--tw-divide-opacity));
+        border-color: hsl(var(--color-primary) / var(--tw-divide-opacity, 1));
       }
       .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
         --tw-divide-opacity: 0.5;
       }
       .border-primary {
         --tw-border-opacity: 1;
-        border-color: hsl(var(--color-primary) / var(--tw-border-opacity));
+        border-color: hsl(var(--color-primary) / var(--tw-border-opacity, 1));
       }
       .border-opacity-50 {
         --tw-border-opacity: 0.5;
       }
       .bg-primary {
         --tw-bg-opacity: 1;
-        background-color: hsl(var(--color-primary) / var(--tw-bg-opacity));
+        background-color: hsl(var(--color-primary) / var(--tw-bg-opacity, 1));
       }
       .bg-opacity-50 {
         --tw-bg-opacity: 0.5;
       }
       .text-primary {
         --tw-text-opacity: 1;
-        color: hsl(var(--color-primary) / var(--tw-text-opacity));
+        color: hsl(var(--color-primary) / var(--tw-text-opacity, 1));
       }
       .text-opacity-50 {
         --tw-text-opacity: 0.5;
       }
       .placeholder-primary::placeholder {
         --tw-placeholder-opacity: 1;
-        color: hsl(var(--color-primary) / var(--tw-placeholder-opacity));
+        color: hsl(var(--color-primary) / var(--tw-placeholder-opacity, 1));
       }
       .placeholder-opacity-50::placeholder {
         --tw-placeholder-opacity: 0.5;
       }
       .ring-primary {
         --tw-ring-opacity: 1;
-        --tw-ring-color: hsl(var(--color-primary) / var(--tw-ring-opacity));
+        --tw-ring-color: hsl(var(--color-primary) / var(--tw-ring-opacity, 1));
       }
       .ring-opacity-50 {
         --tw-ring-opacity: 0.5;
@@ -643,7 +643,7 @@ it('should be possible to use an <alpha-value> as part of the color definition',
     expect(result.css).toMatchFormattedCss(css`
       .bg-primary {
         --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary) / var(--tw-bg-opacity));
+        background-color: rgb(var(--color-primary) / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -769,7 +769,7 @@ it('Theme functions can reference values with slashes in brackets', () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-foo1 {
         --tw-bg-opacity: 1;
-        background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
       }
       .bg-foo2 {
         background-color: #00000080;
@@ -823,7 +823,7 @@ it('works with opacity values defined as a placeholder or a function in when col
       }
       .bg-foo20 {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 100 0 / var(--tw-bg-opacity));
+        background-color: rgb(255 100 0 / var(--tw-bg-opacity, 1));
       }
       .bg-foo21 {
         background-color: #ff640080;
@@ -836,7 +836,7 @@ it('works with opacity values defined as a placeholder or a function in when col
       }
       .bg-foo40 {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 100 0 / var(--tw-bg-opacity));
+        background-color: rgb(255 100 0 / var(--tw-bg-opacity, 1));
       }
       .bg-foo41 {
         background-color: #ff640080;
@@ -967,7 +967,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB
     expect(result.css).toMatchFormattedCss(css`
       .divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
         --tw-divide-opacity: 1;
-        border-color: rgb(147 197 253 / var(--tw-divide-opacity));
+        border-color: rgb(147 197 253 / var(--tw-divide-opacity, 1));
       }
       .divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
         border-color: #93c5fd80;
@@ -980,7 +980,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB
       }
       .border-blue-300 {
         --tw-border-opacity: 1;
-        border-color: rgb(147 197 253 / var(--tw-border-opacity));
+        border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
       }
       .border-blue-300\/50 {
         border-color: #93c5fd80;
@@ -993,7 +993,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB
       }
       .bg-blue-300 {
         --tw-bg-opacity: 1;
-        background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+        background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1));
       }
       .bg-blue-300\/50 {
         background-color: #93c5fd80;
@@ -1006,7 +1006,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB
       }
       .text-blue-300 {
         --tw-text-opacity: 1;
-        color: rgb(147 197 253 / var(--tw-text-opacity));
+        color: rgb(147 197 253 / var(--tw-text-opacity, 1));
       }
       .text-blue-300\/50 {
         color: #93c5fd80;
@@ -1019,7 +1019,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB
       }
       .placeholder-blue-300::placeholder {
         --tw-placeholder-opacity: 1;
-        color: rgb(147 197 253 / var(--tw-placeholder-opacity));
+        color: rgb(147 197 253 / var(--tw-placeholder-opacity, 1));
       }
       .placeholder-blue-300\/50::placeholder {
         color: #93c5fd80;
@@ -1032,7 +1032,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB
       }
       .ring-blue-300 {
         --tw-ring-opacity: 1;
-        --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
+        --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1));
       }
       .ring-blue-300\/50 {
         --tw-ring-color: #93c5fd80;
diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js
index c9647d50fb96..049856a555ed 100644
--- a/tests/plugins/gradientColorStops.test.js
+++ b/tests/plugins/gradientColorStops.test.js
@@ -60,11 +60,11 @@ test('opacity variables are given to colors defined as closures', () => {
       }
       .text-primary {
         --tw-text-opacity: 1;
-        color: rgba(31, 31, 31, var(--tw-text-opacity));
+        color: rgba(31, 31, 31, var(--tw-text-opacity, 1));
       }
       .text-secondary {
         --tw-text-opacity: 1;
-        color: hsl(10 50% 50% / var(--tw-text-opacity));
+        color: hsl(10 50% 50% / var(--tw-text-opacity, 1));
       }
       .text-opacity-50 {
         --tw-text-opacity: 0.5;
diff --git a/tests/prefers-contrast.test.js b/tests/prefers-contrast.test.js
index 52420ee1e395..87d983472946 100644
--- a/tests/prefers-contrast.test.js
+++ b/tests/prefers-contrast.test.js
@@ -21,18 +21,18 @@ it('should be possible to use contrast-more and contrast-less variants', () => {
       ${defaults}
       .bg-white {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
       }
       @media (prefers-contrast: more) {
         .contrast-more\:bg-pink-500 {
           --tw-bg-opacity: 1;
-          background-color: rgb(236 72 153 / var(--tw-bg-opacity));
+          background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
         }
       }
       @media (prefers-contrast: less) {
         .contrast-less\:bg-black {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       }
     `)
@@ -57,13 +57,13 @@ it('dark mode should appear after the contrast variants', () => {
       @media (prefers-contrast: more) {
         .contrast-more\:bg-black {
           --tw-bg-opacity: 1;
-          background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+          background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
         }
       }
       @media (prefers-color-scheme: dark) {
         .dark\:bg-white {
           --tw-bg-opacity: 1;
-          background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+          background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
         }
       }
     `)
diff --git a/tests/prefix.test.js b/tests/prefix.test.js
index 8a478f71028f..2ebb8acbc78b 100644
--- a/tests/prefix.test.js
+++ b/tests/prefix.test.js
@@ -174,7 +174,7 @@ test('prefix', () => {
       }
       .dark\:tw-bg-\[rgb\(255\,0\,0\)\]:where(.tw-dark, .tw-dark *) {
         --tw-bg-opacity: 1;
-        background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+        background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
       }
       .dark\:focus\:tw-text-left:focus:where(.tw-dark, .tw-dark *) {
         text-align: left;
@@ -530,7 +530,7 @@ test('supports non-word prefixes (1)', async () => {
   expect(result.css).toMatchFormattedCss(css`
     .\@bg-black {
       --tw-bg-opacity: 1;
-      background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+      background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
     }
     .\@underline {
       text-decoration-line: underline;
@@ -540,7 +540,7 @@ test('supports non-word prefixes (1)', async () => {
     }
     .foo {
       --tw-text-opacity: 1;
-      color: rgb(255 255 255 / var(--tw-text-opacity));
+      color: rgb(255 255 255 / var(--tw-text-opacity, 1));
       background-color: red;
     }
     .hover\:before\:\@content-\[\'Hovering\'\]:hover:before {
@@ -592,7 +592,7 @@ test('supports non-word prefixes (2)', async () => {
   expect(result.css).toMatchFormattedCss(css`
     .\@\]\$bg-black {
       --tw-bg-opacity: 1;
-      background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+      background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
     }
     .\@\]\$underline {
       text-decoration-line: underline;
@@ -602,7 +602,7 @@ test('supports non-word prefixes (2)', async () => {
     }
     .foo {
       --tw-text-opacity: 1;
-      color: rgb(255 255 255 / var(--tw-text-opacity));
+      color: rgb(255 255 255 / var(--tw-text-opacity, 1));
       background-color: red;
     }
   `)
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
index a6be31fd0aec..92e4b8564be1 100644
--- a/tests/raw-content.test.css
+++ b/tests/raw-content.test.css
@@ -368,7 +368,7 @@
 }
 .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1));
 }
 .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 0.5;
@@ -419,14 +419,14 @@
 }
 .border-black {
   --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
 }
 .border-opacity-10 {
   --tw-border-opacity: 0.1;
 }
 .bg-green-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
 }
 .bg-opacity-20 {
   --tw-bg-opacity: 0.2;
@@ -525,7 +525,7 @@
 }
 .font-sans {
   font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-     Segoe UI Symbol, Noto Color Emoji;
+    Segoe UI Symbol, Noto Color Emoji;
 }
 .text-2xl {
   font-size: 1.5rem;
@@ -566,7 +566,7 @@
 }
 .text-indigo-500 {
   --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
+  color: rgb(99 102 241 / var(--tw-text-opacity, 1));
 }
 .text-opacity-10 {
   --tw-text-opacity: 0.1;
@@ -580,7 +580,7 @@
 }
 .placeholder-green-300::placeholder {
   --tw-placeholder-opacity: 1;
-  color: rgb(134 239 172 / var(--tw-placeholder-opacity));
+  color: rgb(134 239 172 / var(--tw-placeholder-opacity, 1));
 }
 .placeholder-opacity-60::placeholder {
   --tw-placeholder-opacity: 0.6;
@@ -635,7 +635,7 @@
 }
 .ring-white {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
 }
 .ring-opacity-40 {
   --tw-ring-opacity: 0.4;
diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js
index d8d7d2a22d95..1258b79eda62 100644
--- a/tests/resolve-defaults-at-rules.test.js
+++ b/tests/resolve-defaults-at-rules.test.js
@@ -504,7 +504,7 @@ test('with borders', async () => {
       }
       .border-red-500 {
         --tw-border-opacity: 1;
-        border-color: rgb(239 68 68 / var(--tw-border-opacity));
+        border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
       }
       @media (min-width: 768px) {
         .md\:border-2 {
diff --git a/tests/safelist.test.js b/tests/safelist.test.js
index e2621f846e7c..a8d8cc1df366 100644
--- a/tests/safelist.test.js
+++ b/tests/safelist.test.js
@@ -33,7 +33,7 @@ it('should safelist strings', () => {
       }
       .text-gray-200 {
         --tw-text-opacity: 1;
-        color: rgb(229 231 235 / var(--tw-text-opacity));
+        color: rgb(229 231 235 / var(--tw-text-opacity, 1));
       }
       .hover\:underline:hover {
         text-decoration-line: underline;
@@ -57,22 +57,22 @@ it('should safelist based on a pattern regex', () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-red-100 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+        background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
       }
       .bg-red-200 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+        background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
       }
       .uppercase {
         text-transform: uppercase;
       }
       .hover\:bg-red-100:hover {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+        background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
       }
       .hover\:bg-red-200:hover {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+        background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -102,22 +102,22 @@ it('should not generate duplicates', () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-red-100 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+        background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
       }
       .bg-red-200 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+        background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
       }
       .uppercase {
         text-transform: uppercase;
       }
       .hover\:bg-red-100:hover {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+        background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
       }
       .hover\:bg-red-200:hover {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+        background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
       }
     `)
   })
@@ -138,11 +138,11 @@ it('should safelist when using a custom prefix', () => {
     expect(result.css).toMatchFormattedCss(css`
       .tw-bg-red-100 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+        background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
       }
       .tw-bg-red-200 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+        background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
       }
       .tw-uppercase {
         text-transform: uppercase;
@@ -196,11 +196,11 @@ it('should not safelist any invalid variants if provided', () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-red-100 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+        background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
       }
       .bg-red-200 {
         --tw-bg-opacity: 1;
-        background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+        background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
       }
       .uppercase {
         text-transform: uppercase;
@@ -254,7 +254,7 @@ it('should safelist negatives based on a pattern regex', () => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-red-400 {
         --tw-bg-opacity: 1;
-        background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+        background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
       }
       .bg-red-400\/40 {
         background-color: #f8717166;
@@ -264,7 +264,7 @@ it('should safelist negatives based on a pattern regex', () => {
       }
       .bg-red-500 {
         --tw-bg-opacity: 1;
-        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
       }
       .bg-red-500\/40 {
         background-color: #ef444466;
@@ -286,7 +286,7 @@ it('should safelist negatives based on a pattern regex', () => {
       }
       .hover\:bg-red-400:hover {
         --tw-bg-opacity: 1;
-        background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+        background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
       }
       .hover\:bg-red-400\/40:hover {
         background-color: #f8717166;
@@ -296,7 +296,7 @@ it('should safelist negatives based on a pattern regex', () => {
       }
       .hover\:bg-red-500:hover {
         --tw-bg-opacity: 1;
-        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
       }
       .hover\:bg-red-500\/40:hover {
         background-color: #ef444466;
@@ -381,38 +381,38 @@ it('should safelist pattern regex having !important selector with variants', ()
     expect(result.css).toMatchFormattedCss(css`
       .\!bg-gray-500 {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)) !important;
       }
       .\!bg-gray-600 {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)) !important;
       }
       .\!bg-gray-700 {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
       }
       .\!bg-gray-800 {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)) !important;
       }
       .uppercase {
         text-transform: uppercase;
       }
       .hover\:\!bg-gray-500:hover {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)) !important;
       }
       .hover\:\!bg-gray-600:hover {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)) !important;
       }
       .hover\:\!bg-gray-700:hover {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
       }
       .hover\:\!bg-gray-800:hover {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)) !important;
       }
     `)
   })
@@ -437,54 +437,54 @@ it('should safelist multiple patterns with !important selector', () => {
     expect(result.css).toMatchFormattedCss(css`
       .\!bg-gray-200 {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important;
       }
       .\!bg-gray-300 {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important;
       }
       .\!bg-gray-400 {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)) !important;
       }
       .uppercase {
         text-transform: uppercase;
       }
       .\!text-gray-700 {
         --tw-text-opacity: 1 !important;
-        color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
+        color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important;
       }
       .\!text-gray-800 {
         --tw-text-opacity: 1 !important;
-        color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
+        color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important;
       }
       .\!text-gray-900 {
         --tw-text-opacity: 1 !important;
-        color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
+        color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
       }
       .hover\:\!bg-gray-200:hover {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important;
       }
       .hover\:\!bg-gray-300:hover {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important;
       }
       .hover\:\!bg-gray-400:hover {
         --tw-bg-opacity: 1 !important;
-        background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important;
+        background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)) !important;
       }
       .hover\:\!text-gray-700:hover {
         --tw-text-opacity: 1 !important;
-        color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
+        color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important;
       }
       .hover\:\!text-gray-800:hover {
         --tw-text-opacity: 1 !important;
-        color: rgb(31 41 55 / var(--tw-text-opacity)) !important;
+        color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important;
       }
       .hover\:\!text-gray-900:hover {
         --tw-text-opacity: 1 !important;
-        color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
+        color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
       }
     `)
   })
diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js
index 45edbb70cd1e..4a8eaf2963b2 100644
--- a/tests/source-maps.test.js
+++ b/tests/source-maps.test.js
@@ -46,14 +46,14 @@ test('apply generates source maps', async () => {
     '4:6-33 -> 4:6-18',
     '4:6-33 -> 5:6-17',
     '4:6-33 -> 6:6-24',
-    '4:6-33 -> 7:6-61',
+    '4:6-33 -> 7:6-64',
     '5:4 -> 8:4',
     '7:4 -> 10:4',
     '8:6-39 -> 11:6-39',
     '9:6-31 -> 12:6-18',
     '9:6-31 -> 13:6-17',
     '9:6-31 -> 14:6-24',
-    '9:6-31 -> 15:6-61',
+    '9:6-31 -> 15:6-64',
     '10:4 -> 16:4',
     '13:6 -> 18:4',
     '13:6-29 -> 19:6-18',
diff --git a/tests/syntax-lit-html.test.js b/tests/syntax-lit-html.test.js
index a3bdfebda160..5d2248c0b6fd 100644
--- a/tests/syntax-lit-html.test.js
+++ b/tests/syntax-lit-html.test.js
@@ -19,7 +19,7 @@ test('it detects classes in lit-html templates', () => {
       }
       .bg-blue-400 {
         --tw-bg-opacity: 1;
-        background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+        background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
       }
       .px-4 {
         padding-left: 1rem;
@@ -34,11 +34,11 @@ test('it detects classes in lit-html templates', () => {
       }
       .text-white {
         --tw-text-opacity: 1;
-        color: rgb(255 255 255 / var(--tw-text-opacity));
+        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
       }
       .hover\:bg-blue-600:hover {
         --tw-bg-opacity: 1;
-        background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+        background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
       }
     `)
   })
diff --git a/tests/syntax-svelte.test.js b/tests/syntax-svelte.test.js
index 65678857be27..c119df9660f3 100644
--- a/tests/syntax-svelte.test.js
+++ b/tests/syntax-svelte.test.js
@@ -18,12 +18,12 @@ test('it detects svelte based on the file extension', () => {
     expect(result.css).toMatchCss(css`
       .bg-red-500 {
         --tw-bg-opacity: 1;
-        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
       }
       @media (min-width: 1024px) {
         .lg\:hover\:bg-blue-500:hover {
           --tw-bg-opacity: 1;
-          background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+          background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
         }
       }
     `)
@@ -64,12 +64,12 @@ test('using raw with svelte extension', () => {
     expect(result.css).toMatchCss(css`
       .bg-red-500 {
         --tw-bg-opacity: 1;
-        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
       }
       @media (min-width: 1024px) {
         .lg\:hover\:bg-blue-500:hover {
           --tw-bg-opacity: 1;
-          background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+          background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
         }
       }
     `)
diff --git a/tests/variants.test.css b/tests/variants.test.css
index 9fd06868669b..82d62eb6448e 100644
--- a/tests/variants.test.css
+++ b/tests/variants.test.css
@@ -60,11 +60,11 @@
 }
 .first-letter\:text-red-500:first-letter {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 .first-line\:bg-yellow-300:first-line {
   --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
 }
 .first-line\:underline:first-line {
   text-decoration-line: underline;
@@ -85,34 +85,34 @@
 }
 .selection\:bg-blue-500 ::selection {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
 .selection\:text-white ::selection {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 .selection\:bg-blue-500::selection {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
 .selection\:text-white::selection {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 .file\:bg-blue-500::file-selector-button {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
 .file\:text-white::file-selector-button {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 .placeholder\:font-bold::placeholder {
   font-weight: 700;
 }
 .placeholder\:text-red-500::placeholder {
   --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 .backdrop\:shadow-md::backdrop {
   --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
@@ -127,7 +127,7 @@
 .before\:bg-red-500:before {
   content: var(--tw-content);
   --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
 }
 .after\:flex:after {
   content: var(--tw-content);
@@ -154,7 +154,7 @@
 }
 .open\:bg-red-200[open] {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
 .default\:shadow-md:default,
 .checked\:shadow-md:checked,
@@ -207,11 +207,11 @@
 }
 .file\:hover\:bg-blue-600:hover::file-selector-button {
   --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
 }
 .open\:hover\:bg-red-200:hover[open] {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
 .focus\:shadow-md:focus,
 .focus\:hover\:shadow-md:hover:focus,
@@ -236,7 +236,7 @@
 }
 .group[open] .group-open\:bg-red-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
 .group:default .group-default\:shadow-md,
 .group:checked .group-checked\:shadow-md,
@@ -287,7 +287,7 @@
 }
 .group[open]:focus .group-open\:group-focus\:bg-red-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
 .group:focus:hover .group-focus\:group-hover\:shadow-md,
 .group:focus-visible .group-focus-visible\:shadow-md,
@@ -313,7 +313,7 @@
 }
 .peer[open] ~ .peer-open\:bg-red-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
 .peer:default ~ .peer-default\:shadow-md,
 .peer:checked ~ .peer-checked\:shadow-md,
@@ -380,13 +380,13 @@
 @media (prefers-contrast: more) {
   .contrast-more\:bg-yellow-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
   }
 }
 @media (prefers-contrast: less) {
   .contrast-less\:bg-yellow-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
   }
 }
 @media (width >= 640px) {
@@ -447,17 +447,17 @@
 @media (orientation: portrait) {
   .portrait\:bg-yellow-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
   }
 }
 @media (orientation: landscape) {
   .landscape\:bg-yellow-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
   }
 }
-.ltr\:shadow-md:where([dir="ltr"], [dir="ltr"] *),
-.rtl\:shadow-md:where([dir="rtl"], [dir="rtl"] *),
+.ltr\:shadow-md:where([dir='ltr'], [dir='ltr'] *),
+.rtl\:shadow-md:where([dir='rtl'], [dir='rtl'] *),
 .dark\:shadow-md:where(.dark, .dark *),
 .group:disabled:focus:hover
   .dark\:group-disabled\:group-focus\:group-hover\:shadow-md:where(.dark, .dark *),
@@ -505,8 +505,6 @@
 @media print {
   .print\:bg-yellow-300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+    background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
   }
 }
-
-
diff --git a/tests/variants.test.js b/tests/variants.test.js
index 8bc5084c24e1..78d5601133d3 100644
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -299,7 +299,7 @@ test('stacked peer variants', async () => {
   expect(result.css).toIncludeCss(css`
     .peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:border-blue-500 {
       --tw-border-opacity: 1;
-      border-color: rgb(59 130 246 / var(--tw-border-opacity));
+      border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
     }
   `)
 })
@@ -1050,7 +1050,7 @@ test('variants with slashes in them work', () => {
       @media (min-aspect-ratio: 1 / 10) {
         .ar-1\/10\:text-red-500 {
           --tw-text-opacity: 1;
-          color: rgb(239 68 68 / var(--tw-text-opacity));
+          color: rgb(239 68 68 / var(--tw-text-opacity, 1));
         }
       }
     `)
@@ -1087,7 +1087,7 @@ test('variants with slashes support modifiers', () => {
       @media (min-aspect-ratio: 1 / 10) and (foo: 20) {
         .ar-1\/10\/20\:text-red-500 {
           --tw-text-opacity: 1;
-          color: rgb(239 68 68 / var(--tw-text-opacity));
+          color: rgb(239 68 68 / var(--tw-text-opacity, 1));
         }
       }
     `)
diff --git a/tests/withAlphaVariable.test.js b/tests/withAlphaVariable.test.js
index d543dfc6ed73..3a430d5b8b2a 100644
--- a/tests/withAlphaVariable.test.js
+++ b/tests/withAlphaVariable.test.js
@@ -5,7 +5,7 @@ test('it adds the right custom property', () => {
     withAlphaVariable({ color: '#ff0000', property: 'color', variable: '--tw-text-opacity' })
   ).toEqual({
     '--tw-text-opacity': '1',
-    color: 'rgb(255 0 0 / var(--tw-text-opacity))',
+    color: 'rgb(255 0 0 / var(--tw-text-opacity, 1))',
   })
   expect(
     withAlphaVariable({
@@ -15,7 +15,7 @@ test('it adds the right custom property', () => {
     })
   ).toEqual({
     '--tw-text-opacity': '1',
-    color: 'hsl(240 100% 50% / var(--tw-text-opacity))',
+    color: 'hsl(240 100% 50% / var(--tw-text-opacity, 1))',
   })
 })
 
@@ -179,7 +179,7 @@ test('it allows a closure to be passed', () => {
     })
   ).toEqual({
     '--tw-bg-opacity': '1',
-    'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
+    'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity, 1))',
   })
 })
 
@@ -192,7 +192,7 @@ test('it transforms rgb and hsl to space-separated rgb and hsl', () => {
     })
   ).toEqual({
     '--tw-bg-opacity': '1',
-    'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))',
+    'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity, 1))',
   })
   expect(
     withAlphaVariable({
@@ -202,7 +202,7 @@ test('it transforms rgb and hsl to space-separated rgb and hsl', () => {
     })
   ).toEqual({
     '--tw-bg-opacity': '1',
-    'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))',
+    'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity, 1))',
   })
   expect(
     withAlphaVariable({
@@ -212,7 +212,7 @@ test('it transforms rgb and hsl to space-separated rgb and hsl', () => {
     })
   ).toEqual({
     '--tw-bg-opacity': '1',
-    'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))',
+    'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity, 1))',
   })
   expect(
     withAlphaVariable({
@@ -222,7 +222,7 @@ test('it transforms rgb and hsl to space-separated rgb and hsl', () => {
     })
   ).toEqual({
     '--tw-bg-opacity': '1',
-    'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))',
+    'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity, 1))',
   })
 })
 
@@ -235,6 +235,6 @@ test('it transforms named colors to rgb', () => {
     })
   ).toEqual({
     '--tw-bg-opacity': '1',
-    'background-color': 'rgb(255 0 0 / var(--tw-bg-opacity))',
+    'background-color': 'rgb(255 0 0 / var(--tw-bg-opacity, 1))',
   })
 })