diff --git a/__tests__/plugins/gradientColorStops.test.js b/__tests__/plugins/gradientColorStops.test.js
index 826d5e30695e..f75a3a9da1a3 100644
--- a/__tests__/plugins/gradientColorStops.test.js
+++ b/__tests__/plugins/gradientColorStops.test.js
@@ -34,6 +34,7 @@ test('opacity variables are given to colors defined as closures', () => {
     .then(result => {
       const expected = `
         .text-primary {
+          --text-opacity: 1;
           color: rgba(31,31,31,var(--text-opacity,1))
         }
         .text-opacity-50 {
diff --git a/__tests__/withAlphaVariable.test.js b/__tests__/withAlphaVariable.test.js
index 11fc3a12d9ce..4351bd00d9de 100644
--- a/__tests__/withAlphaVariable.test.js
+++ b/__tests__/withAlphaVariable.test.js
@@ -104,6 +104,7 @@ test('it allows a closure to be passed', () => {
       variable: '--bg-opacity',
     })
   ).toEqual({
+    '--bg-opacity': '1',
     'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
   })
 })
diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js
index 32a943420990..af0494855697 100644
--- a/src/util/withAlphaVariable.js
+++ b/src/util/withAlphaVariable.js
@@ -21,6 +21,7 @@ export function toRgba(color) {
 export default function withAlphaVariable({ color, property, variable }) {
   if (_.isFunction(color)) {
     return {
+      [variable]: '1',
       [property]: color({ opacityVariable: variable }),
     }
   }