diff --git a/src/corePlugins.js b/src/corePlugins.js
index 84f95f230b3c..c6067964bc86 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1,8 +1,26 @@
 import * as plugins from './plugins/index.js'
 import configurePlugins from './util/configurePlugins'
 
+function move(items, item, before) {
+  if (items.indexOf(item) === -1) {
+    return items
+  }
+
+  items = [...items]
+  let fromIndex = items.indexOf(item)
+  let toIndex = items.indexOf(before)
+  items.splice(fromIndex, 1)
+  items.splice(toIndex, 0, item)
+  return items
+}
+
 export default function ({ corePlugins: corePluginConfig }) {
-  return configurePlugins(corePluginConfig, Object.keys(plugins)).map((pluginName) => {
+  let pluginOrder = Object.keys(plugins)
+
+  pluginOrder = configurePlugins(corePluginConfig, pluginOrder)
+  pluginOrder = move(pluginOrder, 'transform', 'transformOrigin')
+
+  return pluginOrder.map((pluginName) => {
     return plugins[pluginName]()
   })
 }
diff --git a/src/plugins/index.js b/src/plugins/index.js
index c9ce08ba0805..08f875df5114 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -33,12 +33,12 @@ export { default as flexGrow } from './flexGrow'
 export { default as tableLayout } from './tableLayout'
 export { default as borderCollapse } from './borderCollapse'
 
-export { default as transform } from './transform'
 export { default as transformOrigin } from './transformOrigin'
 export { default as translate } from './translate'
 export { default as rotate } from './rotate'
 export { default as skew } from './skew'
 export { default as scale } from './scale'
+export { default as transform } from './transform'
 
 export { default as animation } from './animation'
 
diff --git a/src/plugins/rotate.js b/src/plugins/rotate.js
index 68b475c91531..0d7151254995 100644
--- a/src/plugins/rotate.js
+++ b/src/plugins/rotate.js
@@ -1,5 +1,13 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function () {
-  return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])
+  return function ({ config, ...rest }) {
+    if (config('mode') === 'jit') {
+      return createUtilityPlugin('rotate', [
+        ['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
+      ])({ config, ...rest })
+    } else {
+      return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })
+    }
+  }
 }
diff --git a/src/plugins/scale.js b/src/plugins/scale.js
index 9c1408fd7698..6637039d7cc4 100644
--- a/src/plugins/scale.js
+++ b/src/plugins/scale.js
@@ -1,11 +1,23 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function () {
-  return createUtilityPlugin('scale', [
-    ['scale', ['--tw-scale-x', '--tw-scale-y']],
-    [
-      ['scale-x', ['--tw-scale-x']],
-      ['scale-y', ['--tw-scale-y']],
-    ],
-  ])
+  return function ({ config, ...rest }) {
+    if (config('mode') === 'jit') {
+      return createUtilityPlugin('scale', [
+        ['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', 'var(--tw-transform)']]],
+        [
+          ['scale-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
+          ['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
+        ],
+      ])({ config, ...rest })
+    } else {
+      return createUtilityPlugin('scale', [
+        ['scale', ['--tw-scale-x', '--tw-scale-y']],
+        [
+          ['scale-x', ['--tw-scale-x']],
+          ['scale-y', ['--tw-scale-y']],
+        ],
+      ])({ config, ...rest })
+    }
+  }
 }
diff --git a/src/plugins/skew.js b/src/plugins/skew.js
index 271a04f9c811..5ad20446f36f 100644
--- a/src/plugins/skew.js
+++ b/src/plugins/skew.js
@@ -1,10 +1,21 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function () {
-  return createUtilityPlugin('skew', [
-    [
-      ['skew-x', ['--tw-skew-x']],
-      ['skew-y', ['--tw-skew-y']],
-    ],
-  ])
+  return function ({ config, ...rest }) {
+    if (config('mode') === 'jit') {
+      return createUtilityPlugin('skew', [
+        [
+          ['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
+          ['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
+        ],
+      ])({ config, ...rest })
+    } else {
+      return createUtilityPlugin('skew', [
+        [
+          ['skew-x', ['--tw-skew-x']],
+          ['skew-y', ['--tw-skew-y']],
+        ],
+      ])({ config, ...rest })
+    }
+  }
 }
diff --git a/src/plugins/transform.js b/src/plugins/transform.js
index 8a8c71441804..32e64112c579 100644
--- a/src/plugins/transform.js
+++ b/src/plugins/transform.js
@@ -1,8 +1,8 @@
 export default function () {
-  return function ({ addUtilities, variants }) {
-    addUtilities(
-      {
-        '.transform': {
+  return function ({ config, addBase, addUtilities, variants }) {
+    if (config('mode') === 'jit') {
+      addBase({
+        '*': {
           '--tw-translate-x': '0',
           '--tw-translate-y': '0',
           '--tw-rotate': '0',
@@ -10,7 +10,7 @@ export default function () {
           '--tw-skew-y': '0',
           '--tw-scale-x': '1',
           '--tw-scale-y': '1',
-          transform: [
+          '--tw-transform': [
             'translateX(var(--tw-translate-x))',
             'translateY(var(--tw-translate-y))',
             'rotate(var(--tw-rotate))',
@@ -20,26 +20,76 @@ export default function () {
             'scaleY(var(--tw-scale-y))',
           ].join(' '),
         },
-        '.transform-gpu': {
-          '--tw-translate-x': '0',
-          '--tw-translate-y': '0',
-          '--tw-rotate': '0',
-          '--tw-skew-x': '0',
-          '--tw-skew-y': '0',
-          '--tw-scale-x': '1',
-          '--tw-scale-y': '1',
-          transform: [
-            'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
-            'rotate(var(--tw-rotate))',
-            'skewX(var(--tw-skew-x))',
-            'skewY(var(--tw-skew-y))',
-            'scaleX(var(--tw-scale-x))',
-            'scaleY(var(--tw-scale-y))',
-          ].join(' '),
+      })
+      addUtilities(
+        {
+          '.transform-cpu': {
+            '--tw-transform': [
+              'translateX(var(--tw-translate-x))',
+              'translateY(var(--tw-translate-y))',
+              'rotate(var(--tw-rotate))',
+              'skewX(var(--tw-skew-x))',
+              'skewY(var(--tw-skew-y))',
+              'scaleX(var(--tw-scale-x))',
+              'scaleY(var(--tw-scale-y))',
+            ].join(' '),
+          },
+          '.transform-gpu': {
+            '--tw-transform': [
+              'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
+              'rotate(var(--tw-rotate))',
+              'skewX(var(--tw-skew-x))',
+              'skewY(var(--tw-skew-y))',
+              'scaleX(var(--tw-scale-x))',
+              'scaleY(var(--tw-scale-y))',
+            ].join(' '),
+          },
+          '.transform-none': { transform: 'none' },
+        },
+        variants('transform')
+      )
+    } else {
+      addUtilities(
+        {
+          '.transform': {
+            '--tw-translate-x': '0',
+            '--tw-translate-y': '0',
+            '--tw-rotate': '0',
+            '--tw-skew-x': '0',
+            '--tw-skew-y': '0',
+            '--tw-scale-x': '1',
+            '--tw-scale-y': '1',
+            transform: [
+              'translateX(var(--tw-translate-x))',
+              'translateY(var(--tw-translate-y))',
+              'rotate(var(--tw-rotate))',
+              'skewX(var(--tw-skew-x))',
+              'skewY(var(--tw-skew-y))',
+              'scaleX(var(--tw-scale-x))',
+              'scaleY(var(--tw-scale-y))',
+            ].join(' '),
+          },
+          '.transform-gpu': {
+            '--tw-translate-x': '0',
+            '--tw-translate-y': '0',
+            '--tw-rotate': '0',
+            '--tw-skew-x': '0',
+            '--tw-skew-y': '0',
+            '--tw-scale-x': '1',
+            '--tw-scale-y': '1',
+            transform: [
+              'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
+              'rotate(var(--tw-rotate))',
+              'skewX(var(--tw-skew-x))',
+              'skewY(var(--tw-skew-y))',
+              'scaleX(var(--tw-scale-x))',
+              'scaleY(var(--tw-scale-y))',
+            ].join(' '),
+          },
+          '.transform-none': { transform: 'none' },
         },
-        '.transform-none': { transform: 'none' },
-      },
-      variants('transform')
-    )
+        variants('transform')
+      )
+    }
   }
 }
diff --git a/src/plugins/translate.js b/src/plugins/translate.js
index 7db108727d8c..9d81ac312b51 100644
--- a/src/plugins/translate.js
+++ b/src/plugins/translate.js
@@ -1,10 +1,21 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function () {
-  return createUtilityPlugin('translate', [
-    [
-      ['translate-x', ['--tw-translate-x']],
-      ['translate-y', ['--tw-translate-y']],
-    ],
-  ])
+  return function ({ config, ...rest }) {
+    if (config('mode') === 'jit') {
+      return createUtilityPlugin('translate', [
+        [
+          ['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
+          ['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
+        ],
+      ])({ config, ...rest })
+    } else {
+      return createUtilityPlugin('translate', [
+        [
+          ['translate-x', ['--tw-translate-x']],
+          ['translate-y', ['--tw-translate-y']],
+        ],
+      ])({ config, ...rest })
+    }
+  }
 }
diff --git a/src/util/createUtilityPlugin.js b/src/util/createUtilityPlugin.js
index 1364ec6ae002..ad87bc29460f 100644
--- a/src/util/createUtilityPlugin.js
+++ b/src/util/createUtilityPlugin.js
@@ -24,10 +24,12 @@ export default function createUtilityPlugin(
         group.reduce((obj, [classPrefix, properties]) => {
           return Object.assign(obj, {
             [classPrefix]: (value) => {
-              return properties.reduce(
-                (obj, name) => Object.assign(obj, { [name]: transformValue(value) }),
-                {}
-              )
+              return properties.reduce((obj, name) => {
+                if (Array.isArray(name)) {
+                  return Object.assign(obj, { [name[0]]: name[1] })
+                }
+                return Object.assign(obj, { [name]: transformValue(value) })
+              }, {})
             },
           })
         }, {}),
diff --git a/tests/jit/apply.test.css b/tests/jit/apply.test.css
index 47e9c46e8e5b..0163f9f5d92e 100644
--- a/tests/jit/apply.test.css
+++ b/tests/jit/apply.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/arbitrary-values.test.css b/tests/jit/arbitrary-values.test.css
index de5344278e98..fd55c12d61c3 100644
--- a/tests/jit/arbitrary-values.test.css
+++ b/tests/jit/arbitrary-values.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
@@ -137,21 +149,27 @@
 }
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
+  transform: var(--tw-transform);
 }
 .rotate-\[2\.3rad\] {
   --tw-rotate: 2.3rad;
+  transform: var(--tw-transform);
 }
 .rotate-\[401grad\] {
   --tw-rotate: 401grad;
+  transform: var(--tw-transform);
 }
 .rotate-\[1\.5turn\] {
   --tw-rotate: 1.5turn;
+  transform: var(--tw-transform);
 }
 .skew-x-\[3px\] {
   --tw-skew-x: 3px;
+  transform: var(--tw-transform);
 }
 .skew-y-\[3px\] {
   --tw-skew-y: 3px;
+  transform: var(--tw-transform);
 }
 .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index b9681901d289..2c1ec5ff3aeb 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
@@ -197,57 +209,49 @@
 .border-collapse {
   border-collapse: collapse;
 }
-.transform {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.transform-gpu {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
 .origin-top-right {
   transform-origin: top right;
 }
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
+  transform: var(--tw-transform);
 }
 .-translate-x-4 {
   --tw-translate-x: -1rem;
+  transform: var(--tw-transform);
 }
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
+  transform: var(--tw-transform);
 }
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
+  transform: var(--tw-transform);
 }
 .rotate-3 {
   --tw-rotate: 3deg;
+  transform: var(--tw-transform);
 }
 .skew-y-12 {
   --tw-skew-y: 12deg;
+  transform: var(--tw-transform);
 }
 .skew-x-12 {
   --tw-skew-x: 12deg;
+  transform: var(--tw-transform);
 }
 .scale-95 {
   --tw-scale-x: 0.95;
   --tw-scale-y: 0.95;
+  transform: var(--tw-transform);
+}
+.transform-gpu {
+  --tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.transform-none {
+  transform: none;
 }
 .animate-none {
   animation: none;
diff --git a/tests/jit/basic-usage.test.html b/tests/jit/basic-usage.test.html
index 37d6a2ad560a..aeab54ede8db 100644
--- a/tests/jit/basic-usage.test.html
+++ b/tests/jit/basic-usage.test.html
@@ -130,7 +130,7 @@
     <div class="text-opacity-10"></div>
     <div class="overflow-ellipsis truncate"></div>
     <div class="uppercase"></div>
-    <div class="transform transform-gpu"></div>
+    <div class="transform transform-gpu transform-none"></div>
     <div class="origin-top-right"></div>
     <div class="delay-300"></div>
     <div class="duration-200"></div>
diff --git a/tests/jit/collapse-adjacent-rules.test.css b/tests/jit/collapse-adjacent-rules.test.css
index 97d2dd07a874..7590c1691f07 100644
--- a/tests/jit/collapse-adjacent-rules.test.css
+++ b/tests/jit/collapse-adjacent-rules.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/custom-extractors.test.css b/tests/jit/custom-extractors.test.css
index c9dc240ea9c6..3416f0d418ca 100644
--- a/tests/jit/custom-extractors.test.css
+++ b/tests/jit/custom-extractors.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/custom-transformers.test.js b/tests/jit/custom-transformers.test.js
index b44d2a610988..0be0dc1b4c00 100644
--- a/tests/jit/custom-transformers.test.js
+++ b/tests/jit/custom-transformers.test.js
@@ -14,8 +14,6 @@ function customTransformer(content) {
 }
 
 const css = `
-  @tailwind base;
-  @tailwind components;
   @tailwind utilities;
 `
 
@@ -26,7 +24,6 @@ test('transform function', () => {
       content: [{ raw: '<div class="uppercase"></div>' }],
       transform: customTransformer,
     },
-    corePlugins: { preflight: false, borderColor: false, ringWidth: false, boxShadow: false },
     theme: {},
     plugins: [],
   }
@@ -49,7 +46,6 @@ test('transform.DEFAULT', () => {
         DEFAULT: customTransformer,
       },
     },
-    corePlugins: { preflight: false, borderColor: false, ringWidth: false, boxShadow: false },
     theme: {},
     plugins: [],
   }
@@ -75,7 +71,6 @@ test('transform.{extension}', () => {
         html: customTransformer,
       },
     },
-    corePlugins: { preflight: false, borderColor: false, ringWidth: false, boxShadow: false },
     theme: {},
     plugins: [],
   }
diff --git a/tests/jit/import-syntax.test.css b/tests/jit/import-syntax.test.css
index 9102974aad8e..b7142af67b06 100644
--- a/tests/jit/import-syntax.test.css
+++ b/tests/jit/import-syntax.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/important-boolean.test.css b/tests/jit/important-boolean.test.css
index 59578775af96..698b5af76994 100644
--- a/tests/jit/important-boolean.test.css
+++ b/tests/jit/important-boolean.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/important-modifier-prefix.test.css b/tests/jit/important-modifier-prefix.test.css
index 379b79b81bd1..016f7cd13332 100644
--- a/tests/jit/important-modifier-prefix.test.css
+++ b/tests/jit/important-modifier-prefix.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/important-modifier.test.css b/tests/jit/important-modifier.test.css
index 350af58acf5d..c2bb4708cfbf 100644
--- a/tests/jit/important-modifier.test.css
+++ b/tests/jit/important-modifier.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/important-selector.test.css b/tests/jit/important-selector.test.css
index 1b983eb19ea7..dfedfd732ca2 100644
--- a/tests/jit/important-selector.test.css
+++ b/tests/jit/important-selector.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/kitchen-sink.test.css b/tests/jit/kitchen-sink.test.css
index 5735b82f7d3a..99571ae5f391 100644
--- a/tests/jit/kitchen-sink.test.css
+++ b/tests/jit/kitchen-sink.test.css
@@ -126,6 +126,18 @@
     }
   }
 }
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
@@ -264,21 +276,10 @@ div {
 .mt-6 {
   margin-top: 1.5rem;
 }
-.transform {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .scale-50 {
   --tw-scale-x: 0.5;
   --tw-scale-y: 0.5;
+  transform: var(--tw-transform);
 }
 .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
@@ -366,6 +367,7 @@ div {
 .hover\:scale-75:hover {
   --tw-scale-x: 0.75;
   --tw-scale-y: 0.75;
+  transform: var(--tw-transform);
 }
 .hover\:font-bold:hover {
   font-weight: 700;
diff --git a/tests/jit/opacity.test.css b/tests/jit/opacity.test.css
index 1d573fe7a5a5..c665bb7b6dfa 100644
--- a/tests/jit/opacity.test.css
+++ b/tests/jit/opacity.test.css
@@ -1,17 +1,3 @@
-*,
-::before,
-::after {
-  border-color: #e5e7eb;
-}
-* {
-  --tw-shadow: 0 0 #0000;
-  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgba(59, 130, 246, 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-}
 .divide-black > :not([hidden]) ~ :not([hidden]) {
   border-color: #000;
 }
diff --git a/tests/jit/opacity.test.js b/tests/jit/opacity.test.js
index faffb9960d89..0f5dc36c3aba 100644
--- a/tests/jit/opacity.test.js
+++ b/tests/jit/opacity.test.js
@@ -13,7 +13,6 @@ test('opacity', () => {
     darkMode: 'class',
     purge: [path.resolve(__dirname, './opacity.test.html')],
     corePlugins: {
-      preflight: false,
       backgroundOpacity: false,
       borderOpacity: false,
       divideOpacity: false,
@@ -25,8 +24,6 @@ test('opacity', () => {
   }
 
   let css = `
-    @tailwind base;
-    @tailwind components;
     @tailwind utilities;
   `
 
diff --git a/tests/jit/prefix.test.css b/tests/jit/prefix.test.css
index fca82e997154..2bae7277d466 100644
--- a/tests/jit/prefix.test.css
+++ b/tests/jit/prefix.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/raw-content.test.css b/tests/jit/raw-content.test.css
index 5cac102891a4..91a7c00dca52 100644
--- a/tests/jit/raw-content.test.css
+++ b/tests/jit/raw-content.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
@@ -197,57 +209,46 @@
 .border-collapse {
   border-collapse: collapse;
 }
-.transform {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.transform-gpu {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
 .origin-top-right {
   transform-origin: top right;
 }
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
+  transform: var(--tw-transform);
 }
 .-translate-x-4 {
   --tw-translate-x: -1rem;
+  transform: var(--tw-transform);
 }
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
+  transform: var(--tw-transform);
 }
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
+  transform: var(--tw-transform);
 }
 .rotate-3 {
   --tw-rotate: 3deg;
+  transform: var(--tw-transform);
 }
 .skew-y-12 {
   --tw-skew-y: 12deg;
+  transform: var(--tw-transform);
 }
 .skew-x-12 {
   --tw-skew-x: 12deg;
+  transform: var(--tw-transform);
 }
 .scale-95 {
   --tw-scale-x: 0.95;
   --tw-scale-y: 0.95;
+  transform: var(--tw-transform);
+}
+.transform-gpu {
+  --tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .animate-none {
   animation: none;
diff --git a/tests/jit/raw-content.test.js b/tests/jit/raw-content.test.js
index 841af912cc9f..f3a3cfa638c9 100644
--- a/tests/jit/raw-content.test.js
+++ b/tests/jit/raw-content.test.js
@@ -71,6 +71,18 @@ test('raw content with extension', () => {
 
   return run(tailwind, css, config).then((result) => {
     expect(result.css).toMatchFormattedCss(`
+      * {
+        --tw-translate-x: 0;
+        --tw-translate-y: 0;
+        --tw-rotate: 0;
+        --tw-skew-x: 0;
+        --tw-skew-y: 0;
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+          rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+          scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+      }
       *,
       ::before,
       ::after {
diff --git a/tests/jit/relative-purge-paths.test.css b/tests/jit/relative-purge-paths.test.css
index 5cac102891a4..91a7c00dca52 100644
--- a/tests/jit/relative-purge-paths.test.css
+++ b/tests/jit/relative-purge-paths.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
@@ -197,57 +209,46 @@
 .border-collapse {
   border-collapse: collapse;
 }
-.transform {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.transform-gpu {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
-    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-    scaleY(var(--tw-scale-y));
-}
 .origin-top-right {
   transform-origin: top right;
 }
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
+  transform: var(--tw-transform);
 }
 .-translate-x-4 {
   --tw-translate-x: -1rem;
+  transform: var(--tw-transform);
 }
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
+  transform: var(--tw-transform);
 }
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
+  transform: var(--tw-transform);
 }
 .rotate-3 {
   --tw-rotate: 3deg;
+  transform: var(--tw-transform);
 }
 .skew-y-12 {
   --tw-skew-y: 12deg;
+  transform: var(--tw-transform);
 }
 .skew-x-12 {
   --tw-skew-x: 12deg;
+  transform: var(--tw-transform);
 }
 .scale-95 {
   --tw-scale-x: 0.95;
   --tw-scale-y: 0.95;
+  transform: var(--tw-transform);
+}
+.transform-gpu {
+  --tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .animate-none {
   animation: none;
diff --git a/tests/jit/responsive-and-variants-atrules.test.css b/tests/jit/responsive-and-variants-atrules.test.css
index 9ce434251a49..b317c9f4b400 100644
--- a/tests/jit/responsive-and-variants-atrules.test.css
+++ b/tests/jit/responsive-and-variants-atrules.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/svelte-syntax.test.css b/tests/jit/svelte-syntax.test.css
index bae10582306d..65c7245ff250 100644
--- a/tests/jit/svelte-syntax.test.css
+++ b/tests/jit/svelte-syntax.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {
diff --git a/tests/jit/variants.test.css b/tests/jit/variants.test.css
index 9d577306cf5b..a6a48df49eb4 100644
--- a/tests/jit/variants.test.css
+++ b/tests/jit/variants.test.css
@@ -1,3 +1,15 @@
+* {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 *,
 ::before,
 ::after {