diff --git a/jest/customMatchers.js b/jest/customMatchers.js
index 6368ef5f4c5c..255a39323b32 100644
--- a/jest/customMatchers.js
+++ b/jest/customMatchers.js
@@ -102,7 +102,7 @@ expect.extend({
   // This is probably naive but it's fast and works well enough.
   toMatchFormattedCss(received, argument) {
     function format(input) {
-      return prettier.format(input, {
+      return prettier.format(input.replace(/\n/g, ''), {
         parser: 'css',
         printWidth: 100,
       })
diff --git a/src/jit/lib/resolveDefaultsAtRules.js b/src/jit/lib/resolveDefaultsAtRules.js
new file mode 100644
index 000000000000..14e7bf19a8b2
--- /dev/null
+++ b/src/jit/lib/resolveDefaultsAtRules.js
@@ -0,0 +1,69 @@
+import postcss from 'postcss'
+import selectorParser from 'postcss-selector-parser'
+
+let elementSelectorParser = selectorParser((selectors) => {
+  return selectors.map((s) => {
+    return s
+      .split((n) => n.type === 'combinator')
+      .pop()
+      .filter((n) => n.type !== 'pseudo' || n.value.startsWith('::'))
+      .join('')
+      .trim()
+  })
+})
+
+let cache = new Map()
+
+function extractElementSelector(selector) {
+  if (!cache.has(selector)) {
+    cache.set(selector, elementSelectorParser.transformSync(selector))
+  }
+
+  return cache.get(selector)
+}
+
+export default function resolveDefaultsAtRules() {
+  return (root) => {
+    let variableNodeMap = new Map()
+    let universals = new Set()
+
+    root.walkAtRules('defaults', (rule) => {
+      if (rule.nodes.length > 0) {
+        universals.add(rule)
+        return
+      }
+
+      let variable = rule.params
+      if (!variableNodeMap.has(variable)) {
+        variableNodeMap.set(variable, new Set())
+      }
+
+      variableNodeMap.get(variable).add(rule.parent)
+
+      rule.remove()
+    })
+
+    for (let universal of universals) {
+      let selectors = new Set()
+
+      let rules = variableNodeMap.get(universal.params) ?? []
+
+      for (let rule of rules) {
+        for (let selector of extractElementSelector(rule.selector)) {
+          selectors.add(selector)
+        }
+      }
+
+      if (selectors.size === 0) {
+        universal.remove()
+        continue
+      }
+
+      let universalRule = postcss.rule()
+      universalRule.selectors = [...selectors]
+      universalRule.append(universal.nodes)
+      universal.before(universalRule)
+      universal.remove()
+    }
+  }
+}
diff --git a/src/jit/processTailwindFeatures.js b/src/jit/processTailwindFeatures.js
index c8bd8eab87b5..d89c1a7ca634 100644
--- a/src/jit/processTailwindFeatures.js
+++ b/src/jit/processTailwindFeatures.js
@@ -3,6 +3,7 @@ import expandTailwindAtRules from './lib/expandTailwindAtRules'
 import expandApplyAtRules from './lib/expandApplyAtRules'
 import evaluateTailwindFunctions from '../lib/evaluateTailwindFunctions'
 import substituteScreenAtRules from '../lib/substituteScreenAtRules'
+import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import { createContext } from './lib/setupContextUtils'
 import log from '../util/log'
@@ -45,6 +46,7 @@ export default function processTailwindFeatures(setupContext) {
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)
     substituteScreenAtRules(context)(root, result)
+    resolveDefaultsAtRules(context)(root, result)
     collapseAdjacentRules(context)(root, result)
   }
 }
diff --git a/src/plugins/backdropBlur.js b/src/plugins/backdropBlur.js
index 256e16c23436..ae6ceaf5667d 100644
--- a/src/plugins/backdropBlur.js
+++ b/src/plugins/backdropBlur.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-blur': (value) => {
           return {
             '--tw-backdrop-blur': `blur(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/backdropBrightness.js b/src/plugins/backdropBrightness.js
index 9b2d9a2c7460..4589913dd09e 100644
--- a/src/plugins/backdropBrightness.js
+++ b/src/plugins/backdropBrightness.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-brightness': (value) => {
           return {
             '--tw-backdrop-brightness': `brightness(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/backdropContrast.js b/src/plugins/backdropContrast.js
index 4b1f09cfb214..e97ef0fd8af2 100644
--- a/src/plugins/backdropContrast.js
+++ b/src/plugins/backdropContrast.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-contrast': (value) => {
           return {
             '--tw-backdrop-contrast': `contrast(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/backdropFilter.js b/src/plugins/backdropFilter.js
index a02f19a140ac..6c7931fe0af3 100644
--- a/src/plugins/backdropFilter.js
+++ b/src/plugins/backdropFilter.js
@@ -2,7 +2,7 @@ export default function () {
   return function ({ config, addBase, addUtilities, variants }) {
     if (config('mode') === 'jit') {
       addBase({
-        '*, ::before, ::after': {
+        '@defaults backdrop-filter': {
           '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@@ -27,7 +27,10 @@ export default function () {
       })
       addUtilities(
         {
-          '.backdrop-filter': { 'backdrop-filter': 'var(--tw-backdrop-filter)' },
+          '.backdrop-filter': {
+            '@defaults backdrop-filter': {},
+            'backdrop-filter': 'var(--tw-backdrop-filter)',
+          },
           '.backdrop-filter-none': { 'backdrop-filter': 'none' },
         },
         variants('backdropFilter')
diff --git a/src/plugins/backdropGrayscale.js b/src/plugins/backdropGrayscale.js
index c3adc46d2356..b7b6708caf55 100644
--- a/src/plugins/backdropGrayscale.js
+++ b/src/plugins/backdropGrayscale.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-grayscale': (value) => {
           return {
             '--tw-backdrop-grayscale': `grayscale(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/backdropHueRotate.js b/src/plugins/backdropHueRotate.js
index e40a22876c10..48d0ce2c1b09 100644
--- a/src/plugins/backdropHueRotate.js
+++ b/src/plugins/backdropHueRotate.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-hue-rotate': (value) => {
           return {
             '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/backdropInvert.js b/src/plugins/backdropInvert.js
index 46922c70b6a4..3a82969df604 100644
--- a/src/plugins/backdropInvert.js
+++ b/src/plugins/backdropInvert.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-invert': (value) => {
           return {
             '--tw-backdrop-invert': `invert(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/backdropOpacity.js b/src/plugins/backdropOpacity.js
index d174c2bc347c..db1cf6bb80e4 100644
--- a/src/plugins/backdropOpacity.js
+++ b/src/plugins/backdropOpacity.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-opacity': (value) => {
           return {
             '--tw-backdrop-opacity': `opacity(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/backdropSaturate.js b/src/plugins/backdropSaturate.js
index 6c96baa41215..e41e5b2d87de 100644
--- a/src/plugins/backdropSaturate.js
+++ b/src/plugins/backdropSaturate.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-saturate': (value) => {
           return {
             '--tw-backdrop-saturate': `saturate(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/backdropSepia.js b/src/plugins/backdropSepia.js
index c21fcda42533..5742ae7d6c25 100644
--- a/src/plugins/backdropSepia.js
+++ b/src/plugins/backdropSepia.js
@@ -5,7 +5,12 @@ export default function () {
         'backdrop-sepia': (value) => {
           return {
             '--tw-backdrop-sepia': `sepia(${value})`,
-            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults backdrop-filter': {},
+                  'backdrop-filter': 'var(--tw-backdrop-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/blur.js b/src/plugins/blur.js
index f668d8f74545..1e8cc17f25f4 100644
--- a/src/plugins/blur.js
+++ b/src/plugins/blur.js
@@ -5,7 +5,12 @@ export default function () {
         blur: (value) => {
           return {
             '--tw-blur': `blur(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js
index bdd826eea861..4a2b15e9a96e 100644
--- a/src/plugins/borderColor.js
+++ b/src/plugins/borderColor.js
@@ -3,20 +3,38 @@ import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function () {
   return function ({ config, addBase, matchUtilities, theme, variants, corePlugins }) {
-    if (!corePlugins('borderOpacity')) {
-      addBase({
-        '*, ::before, ::after': {
-          'border-color': theme('borderColor.DEFAULT', 'currentColor'),
-        },
-      })
+    if (config('mode') === 'jit') {
+      if (!corePlugins('borderOpacity')) {
+        addBase({
+          '@defaults border-width': {
+            'border-color': theme('borderColor.DEFAULT', 'currentColor'),
+          },
+        })
+      } else {
+        addBase({
+          '@defaults border-width': withAlphaVariable({
+            color: theme('borderColor.DEFAULT', 'currentColor'),
+            property: 'border-color',
+            variable: '--tw-border-opacity',
+          }),
+        })
+      }
     } else {
-      addBase({
-        '*, ::before, ::after': withAlphaVariable({
-          color: theme('borderColor.DEFAULT', 'currentColor'),
-          property: 'border-color',
-          variable: '--tw-border-opacity',
-        }),
-      })
+      if (!corePlugins('borderOpacity')) {
+        addBase({
+          '*, ::before, ::after': {
+            'border-color': theme('borderColor.DEFAULT', 'currentColor'),
+          },
+        })
+      } else {
+        addBase({
+          '*, ::before, ::after': withAlphaVariable({
+            color: theme('borderColor.DEFAULT', 'currentColor'),
+            property: 'border-color',
+            variable: '--tw-border-opacity',
+          }),
+        })
+      }
     }
 
     matchUtilities(
diff --git a/src/plugins/borderWidth.js b/src/plugins/borderWidth.js
index 39871f28742a..63876271a879 100644
--- a/src/plugins/borderWidth.js
+++ b/src/plugins/borderWidth.js
@@ -2,17 +2,35 @@ import { asLength } from '../util/pluginUtils'
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function () {
-  return createUtilityPlugin(
-    'borderWidth',
-    [
-      ['border', ['border-width']],
-      [
-        ['border-t', ['border-top-width']],
-        ['border-r', ['border-right-width']],
-        ['border-b', ['border-bottom-width']],
-        ['border-l', ['border-left-width']],
-      ],
-    ],
-    { resolveArbitraryValue: asLength }
-  )
+  return function (helpers) {
+    if (helpers.config('mode') === 'jit') {
+      createUtilityPlugin(
+        'borderWidth',
+        [
+          ['border', [['@defaults border-width', {}], 'border-width']],
+          [
+            ['border-t', [['@defaults border-width', {}], 'border-top-width']],
+            ['border-r', [['@defaults border-width', {}], 'border-right-width']],
+            ['border-b', [['@defaults border-width', {}], 'border-bottom-width']],
+            ['border-l', [['@defaults border-width', {}], 'border-left-width']],
+          ],
+        ],
+        { resolveArbitraryValue: asLength }
+      )(helpers)
+    } else {
+      createUtilityPlugin(
+        'borderWidth',
+        [
+          ['border', ['border-width']],
+          [
+            ['border-t', ['border-top-width']],
+            ['border-r', ['border-right-width']],
+            ['border-b', ['border-bottom-width']],
+            ['border-l', ['border-left-width']],
+          ],
+        ],
+        { resolveArbitraryValue: asLength }
+      )(helpers)
+    }
+  }
 }
diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js
index c5bf5e2a509b..8ed5d84485c9 100644
--- a/src/plugins/boxShadow.js
+++ b/src/plugins/boxShadow.js
@@ -1,11 +1,6 @@
 import transformThemeValue from '../util/transformThemeValue'
 
 let transformValue = transformThemeValue('boxShadow')
-let shadowReset = {
-  '*, ::before, ::after': {
-    '--tw-shadow': '0 0 #0000',
-  },
-}
 let defaultBoxShadow = [
   `var(--tw-ring-offset-shadow, 0 0 #0000)`,
   `var(--tw-ring-shadow, 0 0 #0000)`,
@@ -15,9 +10,22 @@ let defaultBoxShadow = [
 export default function () {
   return function ({ config, matchUtilities, addBase, addUtilities, theme, variants }) {
     if (config('mode') === 'jit') {
-      addBase(shadowReset)
+      addBase({
+        '@defaults box-shadow': {
+          '--tw-ring-offset-shadow': '0 0 #0000',
+          '--tw-ring-shadow': '0 0 #0000',
+          '--tw-shadow': '0 0 #0000',
+        },
+      })
     } else {
-      addUtilities(shadowReset, { respectImportant: false })
+      addUtilities(
+        {
+          '*, ::before, ::after': {
+            '--tw-shadow': '0 0 #0000',
+          },
+        },
+        { respectImportant: false }
+      )
     }
 
     matchUtilities(
@@ -26,6 +34,7 @@ export default function () {
           value = transformValue(value)
 
           return {
+            ...(config('mode') === 'jit' ? { '@defaults box-shadow': {} } : {}),
             '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
             'box-shadow': defaultBoxShadow,
           }
diff --git a/src/plugins/brightness.js b/src/plugins/brightness.js
index b08b63d25a88..2ca040abd293 100644
--- a/src/plugins/brightness.js
+++ b/src/plugins/brightness.js
@@ -5,7 +5,12 @@ export default function () {
         brightness: (value) => {
           return {
             '--tw-brightness': `brightness(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/contrast.js b/src/plugins/contrast.js
index 521eaf1a2ea5..1e9eedf63ac4 100644
--- a/src/plugins/contrast.js
+++ b/src/plugins/contrast.js
@@ -5,7 +5,12 @@ export default function () {
         contrast: (value) => {
           return {
             '--tw-contrast': `contrast(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/dropShadow.js b/src/plugins/dropShadow.js
index 674464e984aa..c9f2e3ea7ddc 100644
--- a/src/plugins/dropShadow.js
+++ b/src/plugins/dropShadow.js
@@ -11,7 +11,12 @@ export default function () {
             '--tw-drop-shadow': Array.isArray(value)
               ? value.map((v) => `drop-shadow(${v})`).join(' ')
               : `drop-shadow(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           },
         ]
       })
diff --git a/src/plugins/filter.js b/src/plugins/filter.js
index 017e5d560b11..230e68222eb1 100644
--- a/src/plugins/filter.js
+++ b/src/plugins/filter.js
@@ -2,7 +2,7 @@ export default function () {
   return function ({ config, addBase, addUtilities, variants }) {
     if (config('mode') === 'jit') {
       addBase({
-        '*, ::before, ::after': {
+        '@defaults filter': {
           '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@@ -27,7 +27,7 @@ export default function () {
       })
       addUtilities(
         {
-          '.filter': { filter: 'var(--tw-filter)' },
+          '.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' },
           '.filter-none': { filter: 'none' },
         },
         variants('filter')
diff --git a/src/plugins/grayscale.js b/src/plugins/grayscale.js
index 97bad401e03f..f02fd0c60d94 100644
--- a/src/plugins/grayscale.js
+++ b/src/plugins/grayscale.js
@@ -5,7 +5,12 @@ export default function () {
         grayscale: (value) => {
           return {
             '--tw-grayscale': `grayscale(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/hueRotate.js b/src/plugins/hueRotate.js
index 8b9fa41157f0..10fc9483e22e 100644
--- a/src/plugins/hueRotate.js
+++ b/src/plugins/hueRotate.js
@@ -5,7 +5,12 @@ export default function () {
         'hue-rotate': (value) => {
           return {
             '--tw-hue-rotate': `hue-rotate(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/invert.js b/src/plugins/invert.js
index 4eb42a21803e..c5793723b669 100644
--- a/src/plugins/invert.js
+++ b/src/plugins/invert.js
@@ -5,7 +5,12 @@ export default function () {
         invert: (value) => {
           return {
             '--tw-invert': `invert(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js
index f4f5c978db00..7db69c1632db 100644
--- a/src/plugins/ringWidth.js
+++ b/src/plugins/ringWidth.js
@@ -9,27 +9,39 @@ export default function () {
       `rgba(147, 197, 253, ${ringOpacityDefault})`
     )
 
-    let ringReset = {
-      '*, ::before, ::after': {
-        '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
-        '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
-        '--tw-ring-color': ringColorDefault,
-        '--tw-ring-offset-shadow': '0 0 #0000',
-        '--tw-ring-shadow': '0 0 #0000',
-      },
-    }
-
     if (config('mode') === 'jit') {
-      addBase(ringReset)
+      addBase({
+        '@defaults ring-width': {
+          '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
+          '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
+          '--tw-ring-color': ringColorDefault,
+          '--tw-ring-offset-shadow': '0 0 #0000',
+          '--tw-ring-shadow': '0 0 #0000',
+          '--tw-shadow': '0 0 #0000',
+        },
+      })
     } else {
-      addUtilities(ringReset, { respectImportant: false })
+      addUtilities(
+        {
+          '*, ::before, ::after': {
+            '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+            '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
+            '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
+            '--tw-ring-color': ringColorDefault,
+            '--tw-ring-offset-shadow': '0 0 #0000',
+            '--tw-ring-shadow': '0 0 #0000',
+          },
+        },
+        { respectImportant: false }
+      )
     }
 
     matchUtilities(
       {
         ring: (value) => {
           return {
+            ...(config('mode') === 'jit' ? { '@defaults ring-width': {} } : {}),
             '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
             '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
             'box-shadow': [
@@ -47,6 +59,14 @@ export default function () {
       }
     )
 
-    addUtilities({ '.ring-inset': { '--tw-ring-inset': 'inset' } }, variants('ringWidth'))
+    addUtilities(
+      {
+        '.ring-inset': {
+          ...(config('mode') === 'jit' ? { '@defaults ring-width': {} } : {}),
+          '--tw-ring-inset': 'inset',
+        },
+      },
+      variants('ringWidth')
+    )
   }
 }
diff --git a/src/plugins/rotate.js b/src/plugins/rotate.js
index 0d7151254995..c3cdb817d473 100644
--- a/src/plugins/rotate.js
+++ b/src/plugins/rotate.js
@@ -4,7 +4,10 @@ export default function () {
   return function ({ config, ...rest }) {
     if (config('mode') === 'jit') {
       return createUtilityPlugin('rotate', [
-        ['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
+        [
+          'rotate',
+          [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']],
+        ],
       ])({ config, ...rest })
     } else {
       return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })
diff --git a/src/plugins/saturate.js b/src/plugins/saturate.js
index 192dad7ad4b5..3b62e6e9cc10 100644
--- a/src/plugins/saturate.js
+++ b/src/plugins/saturate.js
@@ -5,7 +5,12 @@ export default function () {
         saturate: (value) => {
           return {
             '--tw-saturate': `saturate(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/scale.js b/src/plugins/scale.js
index 6637039d7cc4..65700be7429e 100644
--- a/src/plugins/scale.js
+++ b/src/plugins/scale.js
@@ -4,10 +4,24 @@ export default function () {
   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)']]],
+          'scale',
+          [
+            ['@defaults transform', {}],
+            '--tw-scale-x',
+            '--tw-scale-y',
+            ['transform', 'var(--tw-transform)'],
+          ],
+        ],
+        [
+          [
+            'scale-x',
+            [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
+          ],
+          [
+            'scale-y',
+            [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
+          ],
         ],
       ])({ config, ...rest })
     } else {
diff --git a/src/plugins/sepia.js b/src/plugins/sepia.js
index 0d73697e0b28..5edaa1d32029 100644
--- a/src/plugins/sepia.js
+++ b/src/plugins/sepia.js
@@ -5,7 +5,12 @@ export default function () {
         sepia: (value) => {
           return {
             '--tw-sepia': `sepia(${value})`,
-            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+            ...(config('mode') === 'jit'
+              ? {
+                  '@defaults filter': {},
+                  filter: 'var(--tw-filter)',
+                }
+              : {}),
           }
         },
       },
diff --git a/src/plugins/skew.js b/src/plugins/skew.js
index 5ad20446f36f..741ed6bee821 100644
--- a/src/plugins/skew.js
+++ b/src/plugins/skew.js
@@ -5,8 +5,14 @@ export default function () {
     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)']]],
+          [
+            'skew-x',
+            [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']],
+          ],
+          [
+            'skew-y',
+            [['@defaults transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']],
+          ],
         ],
       ])({ config, ...rest })
     } else {
diff --git a/src/plugins/transform.js b/src/plugins/transform.js
index 0cd2c46b56b8..a67a063cc1d9 100644
--- a/src/plugins/transform.js
+++ b/src/plugins/transform.js
@@ -2,7 +2,7 @@ export default function () {
   return function ({ config, addBase, addUtilities, variants }) {
     if (config('mode') === 'jit') {
       addBase({
-        '*, ::before, ::after': {
+        '@defaults transform': {
           '--tw-translate-x': '0',
           '--tw-translate-y': '0',
           '--tw-rotate': '0',
@@ -24,6 +24,7 @@ export default function () {
       addUtilities(
         {
           '.transform': {
+            '@defaults transform': {},
             transform: 'var(--tw-transform)',
           },
           '.transform-cpu': {
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index e4ceeffd38cd..f6069311ac60 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -1,6 +1,8 @@
-*,
-::before,
-::after {
+.rotate-3,
+.skew-y-12,
+.skew-x-12,
+.scale-95,
+.transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -11,15 +13,41 @@
   --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));
+}
+.border,
+.border-2,
+.border-t,
+.border-b-4 {
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+}
+.shadow,
+.shadow-md,
+.shadow-lg {
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
+}
+.ring,
+.ring-4 {
   --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;
+  --tw-shadow: 0 0 #0000;
+}
+.blur-md,
+.brightness-150,
+.contrast-50,
+.drop-shadow-md,
+.grayscale,
+.hue-rotate-60,
+.invert,
+.saturate-200,
+.sepia,
+.filter {
   --tw-blur: var(--tw-empty, /*!*/ /*!*/);
   --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
   --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
@@ -31,6 +59,17 @@
   --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
   --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
     var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.backdrop-blur-lg,
+.backdrop-brightness-50,
+.backdrop-contrast-0,
+.backdrop-grayscale,
+.backdrop-hue-rotate-90,
+.backdrop-invert,
+.backdrop-opacity-75,
+.backdrop-saturate-150,
+.backdrop-sepia,
+.backdrop-filter {
   --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
   --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
   --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
@@ -437,6 +476,12 @@
 .border-2 {
   border-width: 2px;
 }
+.border-t {
+  border-top-width: 1px;
+}
+.border-b-4 {
+  border-bottom-width: 4px;
+}
 .border-solid {
   border-style: solid;
 }
diff --git a/tests/jit/basic-usage.test.html b/tests/jit/basic-usage.test.html
index aeab54ede8db..2ebefca1cf40 100644
--- a/tests/jit/basic-usage.test.html
+++ b/tests/jit/basic-usage.test.html
@@ -30,7 +30,7 @@
     <div class="rounded-md"></div>
     <div class="border-solid"></div>
     <div class="border"></div>
-    <div class="border-2"></div>
+    <div class="border-2 border-t border-b-4"></div>
     <div class="shadow"></div>
     <div class="shadow-md"></div>
     <div class="shadow-lg"></div>
@@ -112,10 +112,33 @@
     <div class="ring-opacity-40"></div>
     <div class="ring ring-4"></div>
     <div
-      class="filter filter-none blur-md brightness-150 contrast-50 drop-shadow-md grayscale hue-rotate-60 invert saturate-200 sepia"
+      class="
+        filter filter-none
+        blur-md
+        brightness-150
+        contrast-50
+        drop-shadow-md
+        grayscale
+        hue-rotate-60
+        invert
+        saturate-200
+        sepia
+      "
     ></div>
     <div
-      class="backdrop-filter backdrop-filter-none backdrop-blur-lg backdrop-brightness-50 backdrop-contrast-0 backdrop-grayscale backdrop-hue-rotate-90 backdrop-invert backdrop-opacity-75 backdrop-saturate-150 backdrop-sepia"
+      class="
+        backdrop-filter
+        backdrop-filter-none
+        backdrop-blur-lg
+        backdrop-brightness-50
+        backdrop-contrast-0
+        backdrop-grayscale
+        backdrop-hue-rotate-90
+        backdrop-invert
+        backdrop-opacity-75
+        backdrop-saturate-150
+        backdrop-sepia
+      "
     ></div>
     <div class="rotate-3"></div>
     <div class="scale-95"></div>
diff --git a/tests/jit/collapse-adjacent-rules.test.css b/tests/jit/collapse-adjacent-rules.test.css
index 68a80c703bc2..e671284e1bed 100644
--- a/tests/jit/collapse-adjacent-rules.test.css
+++ b/tests/jit/collapse-adjacent-rules.test.css
@@ -1,50 +1,3 @@
-*,
-::before,
-::after {
-  --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  --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;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
-}
 @font-face {
   font-family: 'Poppins';
   src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
diff --git a/tests/jit/import-syntax.test.css b/tests/jit/import-syntax.test.css
index 73c3e283cdfc..689ddb280e7b 100644
--- a/tests/jit/import-syntax.test.css
+++ b/tests/jit/import-syntax.test.css
@@ -1,50 +1,3 @@
-*,
-::before,
-::after {
-  --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  --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;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
-}
 h1 {
   font-size: 32px;
 }
diff --git a/tests/jit/important-boolean.test.css b/tests/jit/important-boolean.test.css
index a61b268ac1a0..49f6bfb64419 100644
--- a/tests/jit/important-boolean.test.css
+++ b/tests/jit/important-boolean.test.css
@@ -1,50 +1,3 @@
-*,
-::before,
-::after {
-  --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  --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;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
-}
 .container {
   width: 100%;
 }
diff --git a/tests/jit/important-modifier-prefix.test.css b/tests/jit/important-modifier-prefix.test.css
index e54af603b654..8bf95f968c1e 100644
--- a/tests/jit/important-modifier-prefix.test.css
+++ b/tests/jit/important-modifier-prefix.test.css
@@ -1,50 +1,3 @@
-*,
-::before,
-::after {
-  --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  --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;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
-}
 .\!tw-container {
   width: 100% !important;
 }
diff --git a/tests/jit/important-modifier.test.css b/tests/jit/important-modifier.test.css
index 8003c41b2d83..fffcd3175978 100644
--- a/tests/jit/important-modifier.test.css
+++ b/tests/jit/important-modifier.test.css
@@ -1,50 +1,3 @@
-*,
-::before,
-::after {
-  --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  --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;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
-}
 .\!container {
   width: 100% !important;
 }
diff --git a/tests/jit/important-selector.test.css b/tests/jit/important-selector.test.css
index bf54935d1830..d5ddedb6e97a 100644
--- a/tests/jit/important-selector.test.css
+++ b/tests/jit/important-selector.test.css
@@ -1,50 +1,3 @@
-*,
-::before,
-::after {
-  --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  --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;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
-}
 .container {
   width: 100%;
 }
diff --git a/tests/jit/kitchen-sink.test.css b/tests/jit/kitchen-sink.test.css
index 38f26fcdd515..4d81eae9ad5f 100644
--- a/tests/jit/kitchen-sink.test.css
+++ b/tests/jit/kitchen-sink.test.css
@@ -126,9 +126,9 @@
     }
   }
 }
-*,
-::before,
-::after {
+.scale-50,
+.transform,
+.hover\:scale-75 {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -139,39 +139,23 @@
   --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+}
+.shadow-sm,
+.shadow-md,
+.hover\:shadow-lg,
+.md\:shadow-sm {
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
+}
+.focus\:ring-2 {
   --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;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
+  --tw-shadow: 0 0 #0000;
 }
 h1 {
   font-size: 1.5rem;
diff --git a/tests/jit/prefix.test.css b/tests/jit/prefix.test.css
index 718a928fafd7..462723d00fe8 100644
--- a/tests/jit/prefix.test.css
+++ b/tests/jit/prefix.test.css
@@ -1,50 +1,3 @@
-*,
-::before,
-::after {
-  --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  --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;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
-}
 .tw-container {
   width: 100%;
 }
diff --git a/tests/jit/relative-purge-paths.test.css b/tests/jit/relative-purge-paths.test.css
index d73226c6094a..e5ffdabd8add 100644
--- a/tests/jit/relative-purge-paths.test.css
+++ b/tests/jit/relative-purge-paths.test.css
@@ -1,6 +1,8 @@
-*,
-::before,
-::after {
+.rotate-3,
+.skew-y-12,
+.skew-x-12,
+.scale-95,
+.transform {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -11,15 +13,39 @@
   --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));
+}
+.border,
+.border-2 {
   --tw-border-opacity: 1;
   border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+}
+.shadow,
+.shadow-md,
+.shadow-lg {
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
+}
+.ring,
+.ring-4 {
   --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;
+  --tw-shadow: 0 0 #0000;
+}
+.blur-md,
+.brightness-150,
+.contrast-50,
+.drop-shadow-md,
+.grayscale,
+.hue-rotate-60,
+.invert,
+.saturate-200,
+.sepia,
+.filter {
   --tw-blur: var(--tw-empty, /*!*/ /*!*/);
   --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
   --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
@@ -31,6 +57,17 @@
   --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
   --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
     var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.backdrop-blur-lg,
+.backdrop-brightness-50,
+.backdrop-contrast-0,
+.backdrop-grayscale,
+.backdrop-hue-rotate-90,
+.backdrop-invert,
+.backdrop-opacity-75,
+.backdrop-saturate-150,
+.backdrop-sepia,
+.backdrop-filter {
   --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
   --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
   --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
diff --git a/tests/jit/resolve-defaults-at-rules.test.js b/tests/jit/resolve-defaults-at-rules.test.js
new file mode 100644
index 000000000000..4ca62e163330
--- /dev/null
+++ b/tests/jit/resolve-defaults-at-rules.test.js
@@ -0,0 +1,607 @@
+import postcss from 'postcss'
+import path from 'path'
+import tailwind from '../../src/jit/index.js'
+
+function run(input, config = {}) {
+  const { currentTestName } = expect.getState()
+
+  return postcss(tailwind(config)).process(input, {
+    from: `${path.resolve(__filename)}?test=${currentTestName}`,
+  })
+}
+
+test('basic utilities', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="scale-x-110 rotate-3 skew-y-6"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .rotate-3,
+      .skew-y-6,
+      .scale-x-110 {
+        --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));
+      }
+      /* --- */
+      .rotate-3 {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+      .skew-y-6 {
+        --tw-skew-y: 6deg;
+        transform: var(--tw-transform);
+      }
+      .scale-x-110 {
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with pseudo-class variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="hover:scale-x-110 focus:rotate-3 hover:focus:skew-y-6"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .hover\\:scale-x-110,
+      .focus\\:rotate-3,
+      .hover\\:focus\\:skew-y-6 {
+        --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));
+      }
+      /* --- */
+      .hover\\:scale-x-110:hover {
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .focus\\:rotate-3:focus {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+      .hover\\:focus\\:skew-y-6:hover:focus {
+        --tw-skew-y: 6deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with pseudo-element variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="before:scale-x-110 after:rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .before\\:scale-x-110::before,
+      .after\\:rotate-3::after {
+        --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\\:scale-x-110::before {
+        content: '';
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .after\\:rotate-3::after {
+        content: '';
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with multi-class variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="group-hover:scale-x-110 peer-focus:rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .group-hover\\:scale-x-110,
+      .peer-focus\\:rotate-3 {
+        --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));
+      }
+      /* --- */
+      .group:hover .group-hover\\:scale-x-110 {
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .peer:focus ~ .peer-focus\\:rotate-3 {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with multi-class pseudo-element variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="group-hover:before:scale-x-110 peer-focus:after:rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .group-hover\\:before\\:scale-x-110::before,
+      .peer-focus\\:after\\:rotate-3::after {
+        --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));
+      }
+      /* --- */
+      .group:hover .group-hover\\:before\\:scale-x-110::before {
+        content: '';
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .peer:focus ~ .peer-focus\\:after\\:rotate-3::after {
+        content: '';
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with multi-class pseudo-element and pseudo-class variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="group-hover:hover:before:scale-x-110 peer-focus:focus:after:rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .group-hover\\:hover\\:before\\:scale-x-110::before,
+      .peer-focus\\:focus\\:after\\:rotate-3::after {
+        --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));
+      }
+      /* --- */
+      .group:hover .group-hover\\:hover\\:before\\:scale-x-110:hover::before {
+        content: '';
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .peer:focus ~ .peer-focus\\:focus\\:after\\:rotate-3:focus::after {
+        content: '';
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with apply', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="foo"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+
+    @layer utilities {
+      .foo {
+        @apply rotate-3;
+      }
+    }
+
+    .bar {
+      @apply before:scale-110;
+    }
+
+    .baz::before {
+      content: '';
+      @apply rotate-45;
+    }
+
+    .whats ~ .next > span:hover {
+      @apply skew-x-6;
+    }
+
+    .media-queries {
+      @apply md:rotate-45;
+    }
+
+    .a,
+    .b,
+    .c {
+      @apply skew-y-3;
+    }
+
+    .a,
+    .b {
+      @apply rotate-45;
+    }
+
+    .a::before,
+    .b::after {
+      @apply rotate-90;
+    }
+
+    .recursive {
+      @apply foo;
+    }
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .foo,
+      .bar::before,
+      .baz::before,
+      span,
+      .media-queries,
+      .a,
+      .b,
+      .c,
+      .a::before,
+      .b::after,
+      .recursive {
+        --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));
+      }
+      /* --- */
+      .foo {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+      .bar::before {
+        content: '';
+        --tw-scale-x: 1.1;
+        --tw-scale-y: 1.1;
+        transform: var(--tw-transform);
+      }
+      .baz::before {
+        content: '';
+        --tw-rotate: 45deg;
+        transform: var(--tw-transform);
+      }
+      .whats ~ .next > span:hover {
+        --tw-skew-x: 6deg;
+        transform: var(--tw-transform);
+      }
+      @media (min-width: 768px) {
+        .media-queries {
+          --tw-rotate: 45deg;
+          transform: var(--tw-transform);
+        }
+      }
+      .a,
+      .b,
+      .c {
+        --tw-skew-y: 3deg;
+        transform: var(--tw-transform);
+      }
+      .a,
+      .b {
+        --tw-rotate: 45deg;
+        transform: var(--tw-transform);
+      }
+      .a::before,
+      .b::after {
+        --tw-rotate: 90deg;
+        transform: var(--tw-transform);
+      }
+      .recursive {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with borders', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="border border-red-500 md:border-2"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .border,
+      .md\\:border-2 {
+        --tw-border-opacity: 1;
+        border-color: rgba(229, 231, 235, var(--tw-border-opacity));
+      }
+      /* --- */
+      .border {
+        border-width: 1px;
+      }
+      .border-red-500 {
+        --tw-border-opacity: 1;
+        border-color: rgba(239, 68, 68, var(--tw-border-opacity));
+      }
+      @media (min-width: 768px) {
+        .md\\:border-2 {
+          border-width: 2px;
+        }
+      }
+    `)
+  })
+})
+
+test('with shadows', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="shadow md:shadow-xl ring-1 ring-black/25"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['boxShadow', 'ringColor', 'ringWidth'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .shadow,
+      .md\\:shadow-xl {
+        --tw-ring-offset-shadow: 0 0 #0000;
+        --tw-ring-shadow: 0 0 #0000;
+        --tw-shadow: 0 0 #0000;
+      }
+      .ring-1 {
+        --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;
+        --tw-shadow: 0 0 #0000;
+      }
+      /* --- */
+      .shadow {
+        --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+          var(--tw-shadow);
+      }
+      .ring-1 {
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+          var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
+          var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      }
+      .ring-black\\/25 {
+        --tw-ring-color: rgba(0, 0, 0, 0.25);
+      }
+      @media (min-width: 768px) {
+        .md\\:shadow-xl {
+          --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+            var(--tw-shadow);
+        }
+      }
+    `)
+  })
+})
+
+test('when no utilities that need the defaults are used', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class=""></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      /* --- */
+    `)
+  })
+})
+
+test('when a utility uses defaults but they do not exist', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['rotate'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      /* --- */
+      .rotate-3 {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
diff --git a/tests/jit/variants.test.css b/tests/jit/variants.test.css
index a80370eaee08..cfe240b75b7f 100644
--- a/tests/jit/variants.test.css
+++ b/tests/jit/variants.test.css
@@ -1,49 +1,113 @@
-*,
-::before,
-::after {
-  --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));
-  --tw-border-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
-  --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);
+.first\:shadow-md,
+.last\:shadow-md,
+.only\:shadow-md,
+.odd\:shadow-md,
+.even\:shadow-md,
+.first-of-type\:shadow-md,
+.last-of-type\:shadow-md,
+.only-of-type\:shadow-md,
+.visited\:shadow-md,
+.target\:shadow-md,
+.default\:shadow-md,
+.checked\:shadow-md,
+.indeterminate\:shadow-md,
+.placeholder-shown\:shadow-md,
+.autofill\:shadow-md,
+.required\:shadow-md,
+.valid\:shadow-md,
+.invalid\:shadow-md,
+.in-range\:shadow-md,
+.out-of-range\:shadow-md,
+.read-only\:shadow-md,
+.empty\:shadow-md,
+.focus-within\:shadow-md,
+.hover\:shadow-md,
+.focus\:shadow-md,
+.focus\:hover\:shadow-md,
+.focus-visible\:shadow-md,
+.active\:shadow-md,
+.disabled\:shadow-md,
+.group-first\:shadow-md,
+.group-last\:shadow-md,
+.group-only\:shadow-md,
+.group-odd\:shadow-md,
+.group-even\:shadow-md,
+.group-first-of-type\:shadow-md,
+.group-last-of-type\:shadow-md,
+.group-only-of-type\:shadow-md,
+.group-visited\:shadow-md,
+.group-target\:shadow-md,
+.group-default\:shadow-md,
+.group-checked\:shadow-md,
+.group-indeterminate\:shadow-md,
+.group-placeholder-shown\:shadow-md,
+.group-autofill\:shadow-md,
+.group-required\:shadow-md,
+.group-valid\:shadow-md,
+.group-invalid\:shadow-md,
+.group-in-range\:shadow-md,
+.group-out-of-range\:shadow-md,
+.group-read-only\:shadow-md,
+.group-empty\:shadow-md,
+.group-focus-within\:shadow-md,
+.group-hover\:shadow-md,
+.group-focus\:shadow-md,
+.group-focus\:group-hover\:shadow-md,
+.group-focus-visible\:shadow-md,
+.group-active\:shadow-md,
+.group-disabled\:shadow-md,
+.group-disabled\:group-focus\:group-hover\:shadow-md,
+.group-disabled\:group-focus\:group-hover\:first\:shadow-md,
+.peer-first\:shadow-md,
+.peer-last\:shadow-md,
+.peer-only\:shadow-md,
+.peer-odd\:shadow-md,
+.peer-even\:shadow-md,
+.peer-first-of-type\:shadow-md,
+.peer-last-of-type\:shadow-md,
+.peer-only-of-type\:shadow-md,
+.peer-visited\:shadow-md,
+.peer-target\:shadow-md,
+.peer-default\:shadow-md,
+.peer-checked\:shadow-md,
+.peer-indeterminate\:shadow-md,
+.peer-placeholder-shown\:shadow-md,
+.peer-autofill\:shadow-md,
+.peer-required\:shadow-md,
+.peer-valid\:shadow-md,
+.peer-invalid\:shadow-md,
+.peer-in-range\:shadow-md,
+.peer-out-of-range\:shadow-md,
+.peer-read-only\:shadow-md,
+.peer-empty\:shadow-md,
+.peer-focus-within\:shadow-md,
+.peer-hover\:shadow-md,
+.peer-focus\:shadow-md,
+.peer-focus\:peer-hover\:shadow-md,
+.peer-focus-visible\:shadow-md,
+.peer-active\:shadow-md,
+.peer-disabled\:shadow-md,
+.peer-disabled\:peer-focus\:peer-hover\:shadow-md,
+.peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md,
+.ltr\:shadow-md,
+.rtl\:shadow-md,
+.motion-safe\:shadow-md,
+.motion-reduce\:shadow-md,
+.dark\:shadow-md,
+.dark\:group-disabled\:group-focus\:group-hover\:shadow-md,
+.dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md,
+.sm\:shadow-md,
+.sm\:active\:shadow-md,
+.md\:shadow-md,
+.md\:group-focus\:shadow-md,
+.lg\:shadow-md,
+.lg\:dark\:shadow-md,
+.xl\:shadow-md,
+.\32xl\:shadow-md,
+.\32xl\:dark\:motion-safe\:focus-within\:shadow-md {
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
-  --tw-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
-  --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
-    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-  --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
-  --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
-  --tw-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);
+  --tw-shadow: 0 0 #0000;
 }
 .first-letter\:text-2xl::first-letter {
   font-size: 1.5rem;