diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
index 001ad2ba6..77823c404 100644
--- a/__tests__/fixtures/tailwind-output-important.css
+++ b/__tests__/fixtures/tailwind-output-important.css
@@ -8338,7 +8338,11 @@ video {
 }
 
 .transform {
-  transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
+  --transform-scale: 1 !important;
+  --transform-rotate: 0 !important;
+  --transform-translate-x: 0 !important;
+  --transform-translate-y: 0 !important;
+  transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
 }
 
 .transform-none {
@@ -17309,7 +17313,11 @@ video {
   }
 
   .sm\:transform {
-    transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
+    --transform-scale: 1 !important;
+    --transform-rotate: 0 !important;
+    --transform-translate-x: 0 !important;
+    --transform-translate-y: 0 !important;
+    transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
   }
 
   .sm\:transform-none {
@@ -26281,7 +26289,11 @@ video {
   }
 
   .md\:transform {
-    transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
+    --transform-scale: 1 !important;
+    --transform-rotate: 0 !important;
+    --transform-translate-x: 0 !important;
+    --transform-translate-y: 0 !important;
+    transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
   }
 
   .md\:transform-none {
@@ -35253,7 +35265,11 @@ video {
   }
 
   .lg\:transform {
-    transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
+    --transform-scale: 1 !important;
+    --transform-rotate: 0 !important;
+    --transform-translate-x: 0 !important;
+    --transform-translate-y: 0 !important;
+    transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
   }
 
   .lg\:transform-none {
@@ -44225,7 +44241,11 @@ video {
   }
 
   .xl\:transform {
-    transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) !important;
+    --transform-scale: 1 !important;
+    --transform-rotate: 0 !important;
+    --transform-translate-x: 0 !important;
+    --transform-translate-y: 0 !important;
+    transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) !important;
   }
 
   .xl\:transform-none {
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index ed0c5089e..cfc2cc11c 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -8338,7 +8338,11 @@ video {
 }
 
 .transform {
-  transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
+  --transform-scale: 1;
+  --transform-rotate: 0;
+  --transform-translate-x: 0;
+  --transform-translate-y: 0;
+  transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
 }
 
 .transform-none {
@@ -17309,7 +17313,11 @@ video {
   }
 
   .sm\:transform {
-    transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
+    --transform-scale: 1;
+    --transform-rotate: 0;
+    --transform-translate-x: 0;
+    --transform-translate-y: 0;
+    transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
   }
 
   .sm\:transform-none {
@@ -26281,7 +26289,11 @@ video {
   }
 
   .md\:transform {
-    transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
+    --transform-scale: 1;
+    --transform-rotate: 0;
+    --transform-translate-x: 0;
+    --transform-translate-y: 0;
+    transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
   }
 
   .md\:transform-none {
@@ -35253,7 +35265,11 @@ video {
   }
 
   .lg\:transform {
-    transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
+    --transform-scale: 1;
+    --transform-rotate: 0;
+    --transform-translate-x: 0;
+    --transform-translate-y: 0;
+    transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
   }
 
   .lg\:transform-none {
@@ -44225,7 +44241,11 @@ video {
   }
 
   .xl\:transform {
-    transform: scale(var(--transform-scale, 1)) rotate(var(--transform-rotate, 0)) translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0));
+    --transform-scale: 1;
+    --transform-rotate: 0;
+    --transform-translate-x: 0;
+    --transform-translate-y: 0;
+    transform: scale(var(--transform-scale)) rotate(var(--transform-rotate)) translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y));
   }
 
   .xl\:transform-none {
diff --git a/src/plugins/transform.js b/src/plugins/transform.js
index f6739a75a..24fba25a1 100644
--- a/src/plugins/transform.js
+++ b/src/plugins/transform.js
@@ -3,11 +3,15 @@ export default function() {
     addUtilities(
       {
         '.transform': {
+          '--transform-scale': '1',
+          '--transform-rotate': '0',
+          '--transform-translate-x': '0',
+          '--transform-translate-y': '0',
           transform: [
-            'scale(var(--transform-scale, 1))',
-            'rotate(var(--transform-rotate, 0))',
-            'translateX(var(--transform-translate-x, 0))',
-            'translateY(var(--transform-translate-y, 0))',
+            'scale(var(--transform-scale))',
+            'rotate(var(--transform-rotate))',
+            'translateX(var(--transform-translate-x))',
+            'translateY(var(--transform-translate-y))',
           ].join(' '),
         },
         '.transform-none': { transform: 'none' },