diff --git a/tests/important-modifier.test.css b/tests/important-modifier.test.css
deleted file mode 100644
index ab770caefd66..000000000000
--- a/tests/important-modifier.test.css
+++ /dev/null
@@ -1,90 +0,0 @@
-*,
-::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-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-}
-.\!container {
-  width: 100% !important;
-}
-@media (min-width: 640px) {
-  .\!container {
-    max-width: 640px !important;
-  }
-}
-@media (min-width: 768px) {
-  .\!container {
-    max-width: 768px !important;
-  }
-}
-@media (min-width: 1024px) {
-  .\!container {
-    max-width: 1024px !important;
-  }
-}
-@media (min-width: 1280px) {
-  .\!container {
-    max-width: 1280px !important;
-  }
-}
-@media (min-width: 1536px) {
-  .\!container {
-    max-width: 1536px !important;
-  }
-}
-.\!font-bold {
-  font-weight: 700 !important;
-}
-.hover\:\!text-center:hover {
-  text-align: center !important;
-}
-@media (min-width: 1024px) {
-  .lg\:\!opacity-50 {
-    opacity: 0.5 !important;
-  }
-}
-@media (min-width: 1280px) {
-  .xl\:focus\:disabled\:\!float-right:disabled:focus {
-    float: right !important;
-  }
-}
diff --git a/tests/important-modifier.test.html b/tests/important-modifier.test.html
deleted file mode 100644
index 02f5401bbee0..000000000000
--- a/tests/important-modifier.test.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="!container"></div>
-<div class="!font-bold"></div>
-<div class="hover:!text-center"></div>
-<div class="lg:!opacity-50"></div>
-<div class="xl:focus:disabled:!float-right"></div>
diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js
index c68c8dcd5227..d25d66190c46 100644
--- a/tests/important-modifier.test.js
+++ b/tests/important-modifier.test.js
@@ -1,26 +1,75 @@
-import fs from 'fs'
-import path from 'path'
-
-import { run, css } from './util/run'
+import { run, css, html } from './util/run'
 
 test('important modifier', () => {
   let config = {
     important: false,
     darkMode: 'class',
-    content: [path.resolve(__dirname, './important-modifier.test.html')],
+    content: [
+      {
+        raw: html`
+          <div class="!container"></div>
+          <div class="!font-bold"></div>
+          <div class="hover:!text-center"></div>
+          <div class="lg:!opacity-50"></div>
+          <div class="xl:focus:disabled:!float-right"></div>
+          <div class="!custom-parent-5"></div>
+        `,
+      },
+    ],
     corePlugins: { preflight: false },
   }
 
   let input = css`
-    @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
 
   return run(input, config).then((result) => {
-    let expectedPath = path.resolve(__dirname, './important-modifier.test.css')
-    let expected = fs.readFileSync(expectedPath, 'utf8')
-
-    expect(result.css).toMatchFormattedCss(expected)
+    expect(result.css).toMatchFormattedCss(css`
+      .\!container {
+        width: 100% !important;
+      }
+      @media (min-width: 640px) {
+        .\!container {
+          max-width: 640px !important;
+        }
+      }
+      @media (min-width: 768px) {
+        .\!container {
+          max-width: 768px !important;
+        }
+      }
+      @media (min-width: 1024px) {
+        .\!container {
+          max-width: 1024px !important;
+        }
+      }
+      @media (min-width: 1280px) {
+        .\!container {
+          max-width: 1280px !important;
+        }
+      }
+      @media (min-width: 1536px) {
+        .\!container {
+          max-width: 1536px !important;
+        }
+      }
+      .\!font-bold {
+        font-weight: 700 !important;
+      }
+      .hover\:\!text-center:hover {
+        text-align: center !important;
+      }
+      @media (min-width: 1024px) {
+        .lg\:\!opacity-50 {
+          opacity: 0.5 !important;
+        }
+      }
+      @media (min-width: 1280px) {
+        .xl\:focus\:disabled\:\!float-right:disabled:focus {
+          float: right !important;
+        }
+      }
+    `)
   })
 })