diff --git a/src/corePlugins.js b/src/corePlugins.js
index c6067964bc86..78d7b25678ae 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -19,6 +19,8 @@ export default function ({ corePlugins: corePluginConfig }) {
 
   pluginOrder = configurePlugins(corePluginConfig, pluginOrder)
   pluginOrder = move(pluginOrder, 'transform', 'transformOrigin')
+  pluginOrder = move(pluginOrder, 'filter', 'blur')
+  pluginOrder = move(pluginOrder, 'backdropFilter', 'backdropBlur')
 
   return pluginOrder.map((pluginName) => {
     return plugins[pluginName]()
diff --git a/src/plugins/backdropBlur.js b/src/plugins/backdropBlur.js
index 992ef9b618c2..256e16c23436 100644
--- a/src/plugins/backdropBlur.js
+++ b/src/plugins/backdropBlur.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-blur': (value) => {
-          return { '--tw-backdrop-blur': `blur(${value})` }
+          return {
+            '--tw-backdrop-blur': `blur(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/backdropBrightness.js b/src/plugins/backdropBrightness.js
index f85ce257c6dc..9b2d9a2c7460 100644
--- a/src/plugins/backdropBrightness.js
+++ b/src/plugins/backdropBrightness.js
@@ -1,10 +1,11 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-brightness': (value) => {
           return {
             '--tw-backdrop-brightness': `brightness(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
           }
         },
       },
diff --git a/src/plugins/backdropContrast.js b/src/plugins/backdropContrast.js
index 8d72dee1be24..4b1f09cfb214 100644
--- a/src/plugins/backdropContrast.js
+++ b/src/plugins/backdropContrast.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-contrast': (value) => {
-          return { '--tw-backdrop-contrast': `contrast(${value})` }
+          return {
+            '--tw-backdrop-contrast': `contrast(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/backdropFilter.js b/src/plugins/backdropFilter.js
index 702e9f7e52f1..0484679a619c 100644
--- a/src/plugins/backdropFilter.js
+++ b/src/plugins/backdropFilter.js
@@ -1,8 +1,8 @@
 export default function () {
-  return function ({ addUtilities, variants }) {
-    addUtilities(
-      {
-        '.backdrop-filter': {
+  return function ({ config, addBase, addUtilities, variants }) {
+    if (config('mode') === 'jit') {
+      addBase({
+        '*': {
           '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@@ -12,7 +12,7 @@ export default function () {
           '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-          'backdrop-filter': [
+          '--tw-backdrop-filter': [
             'var(--tw-backdrop-blur)',
             'var(--tw-backdrop-brightness)',
             'var(--tw-backdrop-contrast)',
@@ -24,9 +24,42 @@ export default function () {
             'var(--tw-backdrop-sepia)',
           ].join(' '),
         },
-        '.backdrop-filter-none': { 'backdrop-filter': 'none' },
-      },
-      variants('backdropFilter')
-    )
+      })
+      addUtilities(
+        {
+          '.backdrop-filter-none': { 'backdrop-filter': 'none' },
+        },
+        variants('backdropFilter')
+      )
+    } else {
+      addUtilities(
+        {
+          '.backdrop-filter': {
+            '--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,/*!*/ /*!*/)',
+            '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)',
+            ].join(' '),
+          },
+          '.backdrop-filter-none': { 'backdrop-filter': 'none' },
+        },
+        variants('backdropFilter')
+      )
+    }
   }
 }
diff --git a/src/plugins/backdropGrayscale.js b/src/plugins/backdropGrayscale.js
index e0369dbd5fbc..c3adc46d2356 100644
--- a/src/plugins/backdropGrayscale.js
+++ b/src/plugins/backdropGrayscale.js
@@ -1,10 +1,11 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-grayscale': (value) => {
           return {
             '--tw-backdrop-grayscale': `grayscale(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
           }
         },
       },
diff --git a/src/plugins/backdropHueRotate.js b/src/plugins/backdropHueRotate.js
index 3b76a917ebb7..e40a22876c10 100644
--- a/src/plugins/backdropHueRotate.js
+++ b/src/plugins/backdropHueRotate.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-hue-rotate': (value) => {
-          return { '--tw-backdrop-hue-rotate': `hue-rotate(${value})` }
+          return {
+            '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/backdropInvert.js b/src/plugins/backdropInvert.js
index 9f6c59d5c8e5..46922c70b6a4 100644
--- a/src/plugins/backdropInvert.js
+++ b/src/plugins/backdropInvert.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-invert': (value) => {
-          return { '--tw-backdrop-invert': `invert(${value})` }
+          return {
+            '--tw-backdrop-invert': `invert(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/backdropOpacity.js b/src/plugins/backdropOpacity.js
index 2fb364f1bc26..d174c2bc347c 100644
--- a/src/plugins/backdropOpacity.js
+++ b/src/plugins/backdropOpacity.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-opacity': (value) => {
-          return { '--tw-backdrop-opacity': `opacity(${value})` }
+          return {
+            '--tw-backdrop-opacity': `opacity(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/backdropSaturate.js b/src/plugins/backdropSaturate.js
index 29094a2a88f6..6c96baa41215 100644
--- a/src/plugins/backdropSaturate.js
+++ b/src/plugins/backdropSaturate.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-saturate': (value) => {
-          return { '--tw-backdrop-saturate': `saturate(${value})` }
+          return {
+            '--tw-backdrop-saturate': `saturate(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/backdropSepia.js b/src/plugins/backdropSepia.js
index b80de4a694e1..c21fcda42533 100644
--- a/src/plugins/backdropSepia.js
+++ b/src/plugins/backdropSepia.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'backdrop-sepia': (value) => {
-          return { '--tw-backdrop-sepia': `sepia(${value})` }
+          return {
+            '--tw-backdrop-sepia': `sepia(${value})`,
+            ...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/blur.js b/src/plugins/blur.js
index 841fb646ab6a..f668d8f74545 100644
--- a/src/plugins/blur.js
+++ b/src/plugins/blur.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         blur: (value) => {
-          return { '--tw-blur': `blur(${value})` }
+          return {
+            '--tw-blur': `blur(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/brightness.js b/src/plugins/brightness.js
index 12842a766ec9..b08b63d25a88 100644
--- a/src/plugins/brightness.js
+++ b/src/plugins/brightness.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         brightness: (value) => {
-          return { '--tw-brightness': `brightness(${value})` }
+          return {
+            '--tw-brightness': `brightness(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/contrast.js b/src/plugins/contrast.js
index d8fbaa4b07af..521eaf1a2ea5 100644
--- a/src/plugins/contrast.js
+++ b/src/plugins/contrast.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         contrast: (value) => {
-          return { '--tw-contrast': `contrast(${value})` }
+          return {
+            '--tw-contrast': `contrast(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       { values: theme('contrast'), variants: variants('contrast'), type: 'any' }
diff --git a/src/plugins/dropShadow.js b/src/plugins/dropShadow.js
index 83ac804701ec..674464e984aa 100644
--- a/src/plugins/dropShadow.js
+++ b/src/plugins/dropShadow.js
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import nameClass from '../util/nameClass'
 
 export default function () {
-  return function ({ addUtilities, theme, variants }) {
+  return function ({ config, addUtilities, theme, variants }) {
     const utilities = _.fromPairs(
       _.map(theme('dropShadow'), (value, modifier) => {
         return [
@@ -11,6 +11,7 @@ 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)' } : {}),
           },
         ]
       })
diff --git a/src/plugins/filter.js b/src/plugins/filter.js
index 7f1d6005f053..61efea0024cb 100644
--- a/src/plugins/filter.js
+++ b/src/plugins/filter.js
@@ -1,8 +1,8 @@
 export default function () {
-  return function ({ addUtilities, variants }) {
-    addUtilities(
-      {
-        '.filter': {
+  return function ({ config, addBase, addUtilities, variants }) {
+    if (config('mode') === 'jit') {
+      addBase({
+        '*': {
           '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@@ -12,7 +12,7 @@ export default function () {
           '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
-          filter: [
+          '--tw-filter': [
             'var(--tw-blur)',
             'var(--tw-brightness)',
             'var(--tw-contrast)',
@@ -24,9 +24,42 @@ export default function () {
             'var(--tw-drop-shadow)',
           ].join(' '),
         },
-        '.filter-none': { filter: 'none' },
-      },
-      variants('filter')
-    )
+      })
+      addUtilities(
+        {
+          '.filter-none': { filter: 'none' },
+        },
+        variants('filter')
+      )
+    } else {
+      addUtilities(
+        {
+          '.filter': {
+            '--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,/*!*/ /*!*/)',
+            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)',
+            ].join(' '),
+          },
+          '.filter-none': { filter: 'none' },
+        },
+        variants('filter')
+      )
+    }
   }
 }
diff --git a/src/plugins/grayscale.js b/src/plugins/grayscale.js
index fda7fa265a98..97bad401e03f 100644
--- a/src/plugins/grayscale.js
+++ b/src/plugins/grayscale.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         grayscale: (value) => {
-          return { '--tw-grayscale': `grayscale(${value})` }
+          return {
+            '--tw-grayscale': `grayscale(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/hueRotate.js b/src/plugins/hueRotate.js
index 52b1995d9598..8b9fa41157f0 100644
--- a/src/plugins/hueRotate.js
+++ b/src/plugins/hueRotate.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         'hue-rotate': (value) => {
-          return { '--tw-hue-rotate': `hue-rotate(${value})` }
+          return {
+            '--tw-hue-rotate': `hue-rotate(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 08f875df5114..be8f4b284362 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -136,7 +136,6 @@ export { default as ringOpacity } from './ringOpacity'
 export { default as ringOffsetWidth } from './ringOffsetWidth'
 export { default as ringOffsetColor } from './ringOffsetColor'
 
-export { default as filter } from './filter'
 export { default as blur } from './blur'
 export { default as brightness } from './brightness'
 export { default as contrast } from './contrast'
@@ -146,8 +145,8 @@ export { default as hueRotate } from './hueRotate'
 export { default as invert } from './invert'
 export { default as saturate } from './saturate'
 export { default as sepia } from './sepia'
+export { default as filter } from './filter'
 
-export { default as backdropFilter } from './backdropFilter'
 export { default as backdropBlur } from './backdropBlur'
 export { default as backdropBrightness } from './backdropBrightness'
 export { default as backdropContrast } from './backdropContrast'
@@ -157,6 +156,7 @@ export { default as backdropInvert } from './backdropInvert'
 export { default as backdropOpacity } from './backdropOpacity'
 export { default as backdropSaturate } from './backdropSaturate'
 export { default as backdropSepia } from './backdropSepia'
+export { default as backdropFilter } from './backdropFilter'
 
 export { default as transitionProperty } from './transitionProperty'
 export { default as transitionDelay } from './transitionDelay'
diff --git a/src/plugins/invert.js b/src/plugins/invert.js
index 3a5f38629d92..4eb42a21803e 100644
--- a/src/plugins/invert.js
+++ b/src/plugins/invert.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         invert: (value) => {
-          return { '--tw-invert': `invert(${value})` }
+          return {
+            '--tw-invert': `invert(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       {
diff --git a/src/plugins/saturate.js b/src/plugins/saturate.js
index 29db0c1e6c32..192dad7ad4b5 100644
--- a/src/plugins/saturate.js
+++ b/src/plugins/saturate.js
@@ -1,10 +1,11 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         saturate: (value) => {
           return {
             '--tw-saturate': `saturate(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
           }
         },
       },
diff --git a/src/plugins/sepia.js b/src/plugins/sepia.js
index aa5317707203..0d73697e0b28 100644
--- a/src/plugins/sepia.js
+++ b/src/plugins/sepia.js
@@ -1,9 +1,12 @@
 export default function () {
-  return function ({ matchUtilities, theme, variants }) {
+  return function ({ config, matchUtilities, theme, variants }) {
     matchUtilities(
       {
         sepia: (value) => {
-          return { '--tw-sepia': `sepia(${value})` }
+          return {
+            '--tw-sepia': `sepia(${value})`,
+            ...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
+          }
         },
       },
       { values: theme('sepia'), variants: variants('sepia'), type: 'any' }
diff --git a/tests/jit/apply.test.css b/tests/jit/apply.test.css
index 0163f9f5d92e..d53c8f6d7bf1 100644
--- a/tests/jit/apply.test.css
+++ b/tests/jit/apply.test.css
@@ -1,30 +1,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));
-}
-*,
-::before,
-::after {
-  --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;
-}
 .basic-example {
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
@@ -309,16 +282,19 @@
   color: green;
   font-weight: 700;
 }
+
 h1 {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+
 @media (min-width: 640px) {
   h1 {
     font-size: 1.875rem;
     line-height: 2.25rem;
   }
 }
+
 @media (min-width: 1024px) {
   h1 {
     font-size: 1.5rem;
@@ -341,6 +317,7 @@ h2 {
     line-height: 2rem;
   }
 }
+
 .important-modifier {
   border-radius: 0.375rem !important;
   padding-left: 1rem;
diff --git a/tests/jit/apply.test.js b/tests/jit/apply.test.js
index 0af26b4f6f4f..f58bafba347f 100644
--- a/tests/jit/apply.test.js
+++ b/tests/jit/apply.test.js
@@ -22,7 +22,6 @@ test('@apply', () => {
   }
 
   let css = `
-  @tailwind base;
   @tailwind components;
   @tailwind utilities;
 
diff --git a/tests/jit/arbitrary-values.test.css b/tests/jit/arbitrary-values.test.css
index fd55c12d61c3..a41fba2a2940 100644
--- a/tests/jit/arbitrary-values.test.css
+++ b/tests/jit/arbitrary-values.test.css
@@ -1,30 +1,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));
-}
-*,
-::before,
-::after {
-  --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;
-}
 .inset-\[11px\] {
   top: 11px;
   right: 11px;
@@ -343,54 +316,71 @@
 }
 .blur-\[15px\] {
   --tw-blur: blur(15px);
+  filter: var(--tw-filter);
 }
 .brightness-\[300\%\] {
   --tw-brightness: brightness(300%);
+  filter: var(--tw-filter);
 }
 .contrast-\[2\.4\] {
   --tw-contrast: contrast(2.4);
+  filter: var(--tw-filter);
 }
 .grayscale-\[0\.55\] {
   --tw-grayscale: grayscale(0.55);
+  filter: var(--tw-filter);
 }
 .hue-rotate-\[0\.8turn\] {
   --tw-hue-rotate: hue-rotate(0.8turn);
+  filter: var(--tw-filter);
 }
 .invert-\[0\.75\] {
   --tw-invert: invert(0.75);
+  filter: var(--tw-filter);
 }
 .saturate-\[180\%\] {
   --tw-saturate: saturate(180%);
+  filter: var(--tw-filter);
 }
 .sepia-\[0\.2\] {
   --tw-sepia: sepia(0.2);
+  filter: var(--tw-filter);
 }
 .backdrop-blur-\[11px\] {
   --tw-backdrop-blur: blur(11px);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-brightness-\[1\.23\] {
   --tw-backdrop-brightness: brightness(1.23);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-contrast-\[0\.87\] {
   --tw-backdrop-contrast: contrast(0.87);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-grayscale-\[0\.42\] {
   --tw-backdrop-grayscale: grayscale(0.42);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-hue-rotate-\[1\.57rad\] {
   --tw-backdrop-hue-rotate: hue-rotate(1.57rad);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-invert-\[0\.66\] {
   --tw-backdrop-invert: invert(0.66);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-opacity-\[22\%\] {
   --tw-backdrop-opacity: opacity(22%);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-saturate-\[144\%\] {
   --tw-backdrop-saturate: saturate(144%);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-sepia-\[0\.38\] {
   --tw-backdrop-sepia: sepia(0.38);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .delay-\[var\(--delay\)\] {
   transition-delay: var(--delay);
diff --git a/tests/jit/arbitrary-values.test.js b/tests/jit/arbitrary-values.test.js
index 3eeaec4c5ffd..ef1fcf6928f9 100644
--- a/tests/jit/arbitrary-values.test.js
+++ b/tests/jit/arbitrary-values.test.js
@@ -17,8 +17,6 @@ test('arbitrary values', () => {
   }
 
   let css = `
-    @tailwind base;
-    @tailwind components;
     @tailwind utilities;
   `
 
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index 2c1ec5ff3aeb..6d1dde932ce5 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -24,6 +24,30 @@
   --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%;
@@ -676,93 +700,84 @@
 .ring-offset-blue-300 {
   --tw-ring-offset-color: #93c5fd;
 }
-.filter {
-  --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, /*!*/ /*!*/);
-  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);
-}
-.filter-none {
-  filter: none;
-}
 .blur-md {
   --tw-blur: blur(12px);
+  filter: var(--tw-filter);
 }
 .brightness-150 {
   --tw-brightness: brightness(1.5);
+  filter: var(--tw-filter);
 }
 .contrast-50 {
   --tw-contrast: contrast(0.5);
+  filter: var(--tw-filter);
 }
 .drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
     drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  filter: var(--tw-filter);
 }
 .grayscale {
   --tw-grayscale: grayscale(100%);
+  filter: var(--tw-filter);
 }
 .hue-rotate-60 {
   --tw-hue-rotate: hue-rotate(60deg);
+  filter: var(--tw-filter);
 }
 .invert {
   --tw-invert: invert(100%);
+  filter: var(--tw-filter);
 }
 .saturate-200 {
   --tw-saturate: saturate(2);
+  filter: var(--tw-filter);
 }
 .sepia {
   --tw-sepia: sepia(100%);
+  filter: var(--tw-filter);
 }
-.backdrop-filter {
-  --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, /*!*/ /*!*/);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-.backdrop-filter-none {
-  backdrop-filter: none;
+.filter-none {
+  filter: none;
 }
 .backdrop-blur-lg {
   --tw-backdrop-blur: blur(16px);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-brightness-50 {
   --tw-backdrop-brightness: brightness(0.5);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-contrast-0 {
   --tw-backdrop-contrast: contrast(0);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-grayscale {
   --tw-backdrop-grayscale: grayscale(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-hue-rotate-90 {
   --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-invert {
   --tw-backdrop-invert: invert(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-opacity-75 {
   --tw-backdrop-opacity: opacity(0.75);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-saturate-150 {
   --tw-backdrop-saturate: saturate(1.5);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-sepia {
   --tw-backdrop-sepia: sepia(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
+}
+.backdrop-filter-none {
+  backdrop-filter: none;
 }
 .transition {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
diff --git a/tests/jit/collapse-adjacent-rules.test.css b/tests/jit/collapse-adjacent-rules.test.css
index 7590c1691f07..af73f469d802 100644
--- a/tests/jit/collapse-adjacent-rules.test.css
+++ b/tests/jit/collapse-adjacent-rules.test.css
@@ -24,6 +24,30 @@
   --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';
diff --git a/tests/jit/custom-extractors.test.css b/tests/jit/custom-extractors.test.css
index 3416f0d418ca..f817afdff9d2 100644
--- a/tests/jit/custom-extractors.test.css
+++ b/tests/jit/custom-extractors.test.css
@@ -1,30 +1,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));
-}
-*,
-::before,
-::after {
-  --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;
-}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
diff --git a/tests/jit/custom-extractors.test.js b/tests/jit/custom-extractors.test.js
index 9c9168e7ffec..7e61777724e2 100644
--- a/tests/jit/custom-extractors.test.js
+++ b/tests/jit/custom-extractors.test.js
@@ -16,8 +16,6 @@ function customExtractor(content) {
 }
 
 const css = `
-  @tailwind base;
-  @tailwind components;
   @tailwind utilities;
 `
 const expectedPath = path.resolve(__dirname, './custom-extractors.test.css')
diff --git a/tests/jit/import-syntax.test.css b/tests/jit/import-syntax.test.css
index b7142af67b06..40fdd04e35b9 100644
--- a/tests/jit/import-syntax.test.css
+++ b/tests/jit/import-syntax.test.css
@@ -24,6 +24,30 @@
   --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 698b5af76994..3e65645a6b0c 100644
--- a/tests/jit/important-boolean.test.css
+++ b/tests/jit/important-boolean.test.css
@@ -24,6 +24,30 @@
   --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 016f7cd13332..c50ff13a9f3e 100644
--- a/tests/jit/important-modifier-prefix.test.css
+++ b/tests/jit/important-modifier-prefix.test.css
@@ -24,6 +24,30 @@
   --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 c2bb4708cfbf..3c018953880e 100644
--- a/tests/jit/important-modifier.test.css
+++ b/tests/jit/important-modifier.test.css
@@ -24,6 +24,30 @@
   --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 dfedfd732ca2..94e6cfc6b4b4 100644
--- a/tests/jit/important-selector.test.css
+++ b/tests/jit/important-selector.test.css
@@ -24,6 +24,30 @@
   --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 99571ae5f391..e7d3d64c95fb 100644
--- a/tests/jit/kitchen-sink.test.css
+++ b/tests/jit/kitchen-sink.test.css
@@ -152,6 +152,30 @@
   --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: 1.5rem;
diff --git a/tests/jit/prefix.test.css b/tests/jit/prefix.test.css
index 2bae7277d466..13650728fc55 100644
--- a/tests/jit/prefix.test.css
+++ b/tests/jit/prefix.test.css
@@ -24,6 +24,30 @@
   --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/raw-content.test.css b/tests/jit/raw-content.test.css
index 91a7c00dca52..7558ed492d16 100644
--- a/tests/jit/raw-content.test.css
+++ b/tests/jit/raw-content.test.css
@@ -1,30 +1,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));
-}
-*,
-::before,
-::after {
-  --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;
-}
 .container {
   width: 100%;
 }
@@ -654,93 +627,84 @@
 .ring-offset-blue-300 {
   --tw-ring-offset-color: #93c5fd;
 }
-.filter {
-  --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, /*!*/ /*!*/);
-  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);
-}
-.filter-none {
-  filter: none;
-}
 .blur-md {
   --tw-blur: blur(12px);
+  filter: var(--tw-filter);
 }
 .brightness-150 {
   --tw-brightness: brightness(1.5);
+  filter: var(--tw-filter);
 }
 .contrast-50 {
   --tw-contrast: contrast(0.5);
+  filter: var(--tw-filter);
 }
 .drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
     drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  filter: var(--tw-filter);
 }
 .grayscale {
   --tw-grayscale: grayscale(100%);
+  filter: var(--tw-filter);
 }
 .hue-rotate-60 {
   --tw-hue-rotate: hue-rotate(60deg);
+  filter: var(--tw-filter);
 }
 .invert {
   --tw-invert: invert(100%);
+  filter: var(--tw-filter);
 }
 .saturate-200 {
   --tw-saturate: saturate(2);
+  filter: var(--tw-filter);
 }
 .sepia {
   --tw-sepia: sepia(100%);
+  filter: var(--tw-filter);
 }
-.backdrop-filter {
-  --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, /*!*/ /*!*/);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-.backdrop-filter-none {
-  backdrop-filter: none;
+.filter-none {
+  filter: none;
 }
 .backdrop-blur-lg {
   --tw-backdrop-blur: blur(16px);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-brightness-50 {
   --tw-backdrop-brightness: brightness(0.5);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-contrast-0 {
   --tw-backdrop-contrast: contrast(0);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-grayscale {
   --tw-backdrop-grayscale: grayscale(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-hue-rotate-90 {
   --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-invert {
   --tw-backdrop-invert: invert(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-opacity-75 {
   --tw-backdrop-opacity: opacity(0.75);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-saturate-150 {
   --tw-backdrop-saturate: saturate(1.5);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-sepia {
   --tw-backdrop-sepia: sepia(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
+}
+.backdrop-filter-none {
+  backdrop-filter: none;
 }
 .transition {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
diff --git a/tests/jit/raw-content.test.js b/tests/jit/raw-content.test.js
index f3a3cfa638c9..c42e69f31fef 100644
--- a/tests/jit/raw-content.test.js
+++ b/tests/jit/raw-content.test.js
@@ -24,7 +24,6 @@ test('raw content', () => {
   }
 
   let css = `
-    @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
@@ -52,7 +51,7 @@ test('raw content with extension', () => {
       options: {
         extractors: [
           {
-            extractor: () => [],
+            extractor: () => ['invisible'],
             extensions: ['html'],
           },
         ],
@@ -63,40 +62,12 @@ test('raw content with extension', () => {
     plugins: [],
   }
 
-  let css = `
-    @tailwind base;
-    @tailwind components;
-    @tailwind utilities;
-  `
+  let css = `@tailwind utilities;`
 
   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 {
-        --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;
+      .invisible {
+        visibility: hidden;
       }
     `)
   })
diff --git a/tests/jit/relative-purge-paths.test.css b/tests/jit/relative-purge-paths.test.css
index 91a7c00dca52..2a64a717ecd9 100644
--- a/tests/jit/relative-purge-paths.test.css
+++ b/tests/jit/relative-purge-paths.test.css
@@ -24,6 +24,30 @@
   --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%;
@@ -654,93 +678,84 @@
 .ring-offset-blue-300 {
   --tw-ring-offset-color: #93c5fd;
 }
-.filter {
-  --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, /*!*/ /*!*/);
-  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);
-}
-.filter-none {
-  filter: none;
-}
 .blur-md {
   --tw-blur: blur(12px);
+  filter: var(--tw-filter);
 }
 .brightness-150 {
   --tw-brightness: brightness(1.5);
+  filter: var(--tw-filter);
 }
 .contrast-50 {
   --tw-contrast: contrast(0.5);
+  filter: var(--tw-filter);
 }
 .drop-shadow-md {
   --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
     drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+  filter: var(--tw-filter);
 }
 .grayscale {
   --tw-grayscale: grayscale(100%);
+  filter: var(--tw-filter);
 }
 .hue-rotate-60 {
   --tw-hue-rotate: hue-rotate(60deg);
+  filter: var(--tw-filter);
 }
 .invert {
   --tw-invert: invert(100%);
+  filter: var(--tw-filter);
 }
 .saturate-200 {
   --tw-saturate: saturate(2);
+  filter: var(--tw-filter);
 }
 .sepia {
   --tw-sepia: sepia(100%);
+  filter: var(--tw-filter);
 }
-.backdrop-filter {
-  --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, /*!*/ /*!*/);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
-    var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
-    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-.backdrop-filter-none {
-  backdrop-filter: none;
+.filter-none {
+  filter: none;
 }
 .backdrop-blur-lg {
   --tw-backdrop-blur: blur(16px);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-brightness-50 {
   --tw-backdrop-brightness: brightness(0.5);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-contrast-0 {
   --tw-backdrop-contrast: contrast(0);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-grayscale {
   --tw-backdrop-grayscale: grayscale(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-hue-rotate-90 {
   --tw-backdrop-hue-rotate: hue-rotate(90deg);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-invert {
   --tw-backdrop-invert: invert(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-opacity-75 {
   --tw-backdrop-opacity: opacity(0.75);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-saturate-150 {
   --tw-backdrop-saturate: saturate(1.5);
+  backdrop-filter: var(--tw-backdrop-filter);
 }
 .backdrop-sepia {
   --tw-backdrop-sepia: sepia(100%);
+  backdrop-filter: var(--tw-backdrop-filter);
+}
+.backdrop-filter-none {
+  backdrop-filter: none;
 }
 .transition {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
diff --git a/tests/jit/responsive-and-variants-atrules.test.css b/tests/jit/responsive-and-variants-atrules.test.css
index b317c9f4b400..7bcb5dc60620 100644
--- a/tests/jit/responsive-and-variants-atrules.test.css
+++ b/tests/jit/responsive-and-variants-atrules.test.css
@@ -1,30 +1,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));
-}
-*,
-::before,
-::after {
-  --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;
-}
 .responsive-in-components {
   color: blue;
 }
diff --git a/tests/jit/responsive-and-variants-atrules.test.js b/tests/jit/responsive-and-variants-atrules.test.js
index dc603b72f02f..e8cf401c39da 100644
--- a/tests/jit/responsive-and-variants-atrules.test.js
+++ b/tests/jit/responsive-and-variants-atrules.test.js
@@ -19,7 +19,6 @@ test('responsive and variants atrules', () => {
   }
 
   let css = `
-    @tailwind base;
     @tailwind components;
     @tailwind utilities;
 
diff --git a/tests/jit/svelte-syntax.test.css b/tests/jit/svelte-syntax.test.css
index 65c7245ff250..8cbd69623a2e 100644
--- a/tests/jit/svelte-syntax.test.css
+++ b/tests/jit/svelte-syntax.test.css
@@ -1,30 +1,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));
-}
-*,
-::before,
-::after {
-  --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;
-}
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
diff --git a/tests/jit/svelte-syntax.test.js b/tests/jit/svelte-syntax.test.js
index 5648f1741d53..a7dae657bcb1 100644
--- a/tests/jit/svelte-syntax.test.js
+++ b/tests/jit/svelte-syntax.test.js
@@ -19,7 +19,6 @@ test('basic usage', () => {
   }
 
   let css = `
-    @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
diff --git a/tests/jit/variants.test.css b/tests/jit/variants.test.css
index a6a48df49eb4..be2491c2806f 100644
--- a/tests/jit/variants.test.css
+++ b/tests/jit/variants.test.css
@@ -24,6 +24,30 @@
   --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);
 }
 .first-letter\:text-2xl::first-letter {
   font-size: 1.5rem;