From bfc9fa79d4edc843935c00162f620058c2a0e476 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 29 Jul 2021 13:31:06 +0200
Subject: [PATCH] Improve tests (#5108)

* change specific selector to universal selector

This is the commit that we could "undo" in the future if we need it
again.

* simplify `relative-purge-paths` test

This test doesn't require the "reset" selector (whether it is super specific or universal)

Simplified it so that it tests the relative purge config and nothing else.

* added css tagged template literal helpers

This allows prettier to format the string as CSS. This improves formatting and will improve future diffs.

* drop tailwind headers in the sanity tests

Every time we bump the Tailwind version, the sanity tests fail, because
the current version is encoded in the fixture files.

This will ensure that all of the contents is still checked and the
header is skipped. The header will be tested against a regex to ensure
that it is still there.

This should be a small but nice QoL improvement, so that we don't have
to think about updating those tests whenever we fix bugs or land new
features.
---
 tests/jit/basic-usage.test.css              |  46 +-
 tests/jit/basic-usage.test.js               |   8 +-
 tests/jit/kitchen-sink.test.css             |  13 +-
 tests/jit/kitchen-sink.test.js              | 173 ++--
 tests/jit/relative-purge-paths.test.css     | 825 --------------------
 tests/jit/relative-purge-paths.test.html    | 136 +---
 tests/jit/relative-purge-paths.test.js      |  18 +-
 tests/jit/resolve-defaults-at-rules.test.js | 156 ++--
 tests/jit/variants.test.css                 | 110 +--
 tests/jit/variants.test.js                  |  14 +-
 tests/sanity.test.js                        |  22 +-
 11 files changed, 217 insertions(+), 1304 deletions(-)
 delete mode 100644 tests/jit/relative-purge-paths.test.css

diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index c610a3bcb..0438acf9e 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -1,12 +1,6 @@
-.translate-x-5,
-.-translate-x-4,
-.translate-y-6,
-.-translate-x-3,
-.rotate-3,
-.skew-y-12,
-.skew-x-12,
-.scale-95,
-.transform {
+*,
+::before,
+::after {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -17,23 +11,11 @@
   --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;
@@ -41,17 +23,6 @@
   --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, /*!*/ /*!*/);
@@ -63,17 +34,6 @@
   --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/basic-usage.test.js b/tests/jit/basic-usage.test.js
index 7c75f71d9..f45295192 100644
--- a/tests/jit/basic-usage.test.js
+++ b/tests/jit/basic-usage.test.js
@@ -9,6 +9,10 @@ function run(input, config = {}) {
   })
 }
 
+function css(templates) {
+  return templates.join('')
+}
+
 test('basic usage', () => {
   let config = {
     mode: 'jit',
@@ -18,13 +22,13 @@ test('basic usage', () => {
     plugins: [],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './basic-usage.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/kitchen-sink.test.css b/tests/jit/kitchen-sink.test.css
index 4d81eae9a..ffd0e7dc6 100644
--- a/tests/jit/kitchen-sink.test.css
+++ b/tests/jit/kitchen-sink.test.css
@@ -126,9 +126,9 @@
     }
   }
 }
-.scale-50,
-.transform,
-.hover\:scale-75 {
+*,
+::before,
+::after {
   --tw-translate-x: 0;
   --tw-translate-y: 0;
   --tw-rotate: 0;
@@ -139,16 +139,9 @@
   --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));
-}
-.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;
diff --git a/tests/jit/kitchen-sink.test.js b/tests/jit/kitchen-sink.test.js
index 7e3b8ee3c..4f6194faa 100644
--- a/tests/jit/kitchen-sink.test.js
+++ b/tests/jit/kitchen-sink.test.js
@@ -9,6 +9,10 @@ function run(input, config = {}) {
   })
 }
 
+function css(templates) {
+  return templates.join('')
+}
+
 test('it works', () => {
   let config = {
     darkMode: 'class',
@@ -71,100 +75,101 @@ test('it works', () => {
     ],
   }
 
-  let css = `
-  @layer utilities {
-    .custom-util {
-      background: #abcdef;
+  let input = css`
+    @layer utilities {
+      .custom-util {
+        background: #abcdef;
+      }
+      *,
+      ::before,
+      ::after {
+        margin: 10px;
+      }
     }
-    *,
-::before,
-::after {
-      margin: 10px;
+    @layer components {
+      .test-apply-font-variant {
+        @apply ordinal tabular-nums;
+      }
+      .custom-component {
+        background: #123456;
+      }
+      *,
+      ::before,
+      ::after {
+        padding: 5px;
+      }
+      .foo .bg-black {
+        appearance: none;
+      }
     }
-  }
-  @layer components {
-    .test-apply-font-variant {
-      @apply ordinal tabular-nums;
+    @layer base {
+      div {
+        background: #654321;
+      }
     }
-    .custom-component {
-      background: #123456;
+    .theme-test {
+      font-family: theme('fontFamily.sans');
+      color: theme('colors.blue.500');
     }
-    *,
-::before,
-::after {
-      padding: 5px;
+    @screen lg {
+      .screen-test {
+        color: purple;
+      }
     }
-    .foo .bg-black {
-      appearance: none;
+    .apply-1 {
+      @apply mt-6;
     }
-  }
-  @layer base {
-    div {
-      background: #654321;
+    .apply-2 {
+      @apply mt-6;
     }
-  }
-  .theme-test {
-    font-family: theme('fontFamily.sans');
-    color: theme('colors.blue.500');
-  }
-  @screen lg {
-    .screen-test {
-      color: purple;
+    .apply-test {
+      @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
     }
-  }
-  .apply-1 {
-    @apply mt-6;
-  }
-  .apply-2 {
-    @apply mt-6;
-  }
-  .apply-test {
-    @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200;
-  }
-  .apply-components {
-    @apply container mx-auto;
-  }
-  .drop-empty-rules {
-    @apply hover:font-bold;
-  }
-  .apply-group {
-    @apply group-hover:font-bold;
-  }
-  .apply-dark-mode {
-    @apply dark:font-bold;
-  }
-  .apply-with-existing:hover {
-    @apply font-normal sm:bg-green-500;
-  }
-  .multiple, .selectors {
-    @apply font-bold group-hover:font-normal;
-  }
-  .list {
-    @apply space-x-4;
-  }
-  .nested {
-    .example {
-      @apply font-bold hover:font-normal;
+    .apply-components {
+      @apply container mx-auto;
     }
-  }
-  .apply-order-a {
-    @apply m-5 mt-6;
-  }
-  .apply-order-b {
-    @apply mt-6 m-5;
-  }
-  .apply-dark-group-example-a {
-    @apply dark:group-hover:bg-green-500;
-  }
-  .crazy-example {
-    @apply sm:motion-safe:group-active:focus:opacity-10;
-  }
-  @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
-`
+    .drop-empty-rules {
+      @apply hover:font-bold;
+    }
+    .apply-group {
+      @apply group-hover:font-bold;
+    }
+    .apply-dark-mode {
+      @apply dark:font-bold;
+    }
+    .apply-with-existing:hover {
+      @apply font-normal sm:bg-green-500;
+    }
+    .multiple,
+    .selectors {
+      @apply font-bold group-hover:font-normal;
+    }
+    .list {
+      @apply space-x-4;
+    }
+    .nested {
+      .example {
+        @apply font-bold hover:font-normal;
+      }
+    }
+    .apply-order-a {
+      @apply m-5 mt-6;
+    }
+    .apply-order-b {
+      @apply mt-6 m-5;
+    }
+    .apply-dark-group-example-a {
+      @apply dark:group-hover:bg-green-500;
+    }
+    .crazy-example {
+      @apply sm:motion-safe:group-active:focus:opacity-10;
+    }
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './kitchen-sink.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/relative-purge-paths.test.css b/tests/jit/relative-purge-paths.test.css
deleted file mode 100644
index bc32fb75a..000000000
--- a/tests/jit/relative-purge-paths.test.css
+++ /dev/null
@@ -1,825 +0,0 @@
-.translate-x-5,
-.-translate-x-4,
-.translate-y-6,
-.-translate-x-3,
-.rotate-3,
-.skew-y-12,
-.skew-x-12,
-.scale-95,
-.transform {
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --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, /*!*/ /*!*/);
-  --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);
-}
-.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, /*!*/ /*!*/);
-  --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%;
-}
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-.pointer-events-none {
-  pointer-events: none;
-}
-.invisible {
-  visibility: hidden;
-}
-.absolute {
-  position: absolute;
-}
-.inset-0 {
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-.inset-y-4 {
-  top: 1rem;
-  bottom: 1rem;
-}
-.inset-x-2 {
-  left: 0.5rem;
-  right: 0.5rem;
-}
-.top-6 {
-  top: 1.5rem;
-}
-.right-8 {
-  right: 2rem;
-}
-.bottom-12 {
-  bottom: 3rem;
-}
-.left-16 {
-  left: 4rem;
-}
-.isolate {
-  isolation: isolate;
-}
-.isolation-auto {
-  isolation: auto;
-}
-.z-30 {
-  z-index: 30;
-}
-.order-last {
-  order: 9999;
-}
-.order-2 {
-  order: 2;
-}
-.col-span-3 {
-  grid-column: span 3 / span 3;
-}
-.col-start-1 {
-  grid-column-start: 1;
-}
-.col-end-4 {
-  grid-column-end: 4;
-}
-.row-span-2 {
-  grid-row: span 2 / span 2;
-}
-.row-start-3 {
-  grid-row-start: 3;
-}
-.row-end-5 {
-  grid-row-end: 5;
-}
-.float-right {
-  float: right;
-}
-.clear-left {
-  clear: left;
-}
-.m-4 {
-  margin: 1rem;
-}
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-.mt-0 {
-  margin-top: 0px;
-}
-.mr-1 {
-  margin-right: 0.25rem;
-}
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
-.ml-4 {
-  margin-left: 1rem;
-}
-.box-border {
-  box-sizing: border-box;
-}
-.inline-grid {
-  display: inline-grid;
-}
-.hidden {
-  display: none;
-}
-.h-16 {
-  height: 4rem;
-}
-.max-h-screen {
-  max-height: 100vh;
-}
-.min-h-0 {
-  min-height: 0px;
-}
-.w-12 {
-  width: 3rem;
-}
-.min-w-min {
-  min-width: min-content;
-}
-.max-w-full {
-  max-width: 100%;
-}
-.flex-1 {
-  flex: 1 1 0%;
-}
-.flex-shrink {
-  flex-shrink: 1;
-}
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-.flex-grow {
-  flex-grow: 1;
-}
-.flex-grow-0 {
-  flex-grow: 0;
-}
-.table-fixed {
-  table-layout: fixed;
-}
-.border-collapse {
-  border-collapse: collapse;
-}
-.origin-top-right {
-  transform-origin: top right;
-}
-.translate-x-5 {
-  --tw-translate-x: 1.25rem;
-  transform: var(--tw-transform);
-}
-.-translate-x-4 {
-  --tw-translate-x: -1rem;
-  transform: var(--tw-transform);
-}
-.translate-y-6 {
-  --tw-translate-y: 1.5rem;
-  transform: var(--tw-transform);
-}
-.-translate-x-3 {
-  --tw-translate-x: -0.75rem;
-  transform: var(--tw-transform);
-}
-.rotate-3 {
-  --tw-rotate: 3deg;
-  transform: var(--tw-transform);
-}
-.skew-y-12 {
-  --tw-skew-y: 12deg;
-  transform: var(--tw-transform);
-}
-.skew-x-12 {
-  --tw-skew-x: 12deg;
-  transform: var(--tw-transform);
-}
-.scale-95 {
-  --tw-scale-x: 0.95;
-  --tw-scale-y: 0.95;
-  transform: var(--tw-transform);
-}
-.transform {
-  transform: var(--tw-transform);
-}
-.transform-gpu {
-  --tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
-    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
-    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.animate-none {
-  animation: none;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-.cursor-pointer {
-  cursor: pointer;
-}
-.select-none {
-  user-select: none;
-}
-.resize-none {
-  resize: none;
-}
-.list-inside {
-  list-style-position: inside;
-}
-.list-disc {
-  list-style-type: disc;
-}
-.appearance-none {
-  appearance: none;
-}
-.auto-cols-min {
-  grid-auto-columns: min-content;
-}
-.grid-flow-row {
-  grid-auto-flow: row;
-}
-.auto-rows-max {
-  grid-auto-rows: max-content;
-}
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-.grid-rows-3 {
-  grid-template-rows: repeat(3, minmax(0, 1fr));
-}
-.flex-row-reverse {
-  flex-direction: row-reverse;
-}
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.place-content-start {
-  place-content: start;
-}
-.place-items-end {
-  place-items: end;
-}
-.content-center {
-  align-content: center;
-}
-.items-start {
-  align-items: flex-start;
-}
-.justify-center {
-  justify-content: center;
-}
-.justify-items-end {
-  justify-items: end;
-}
-.gap-4 {
-  gap: 1rem;
-}
-.gap-x-2 {
-  column-gap: 0.5rem;
-}
-.gap-y-3 {
-  row-gap: 0.75rem;
-}
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-.space-y-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 1;
-}
-.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 1;
-}
-.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-x-reverse: 0;
-  border-right-width: calc(2px * var(--tw-divide-x-reverse));
-  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
-}
-.divide-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(4px * var(--tw-divide-y-reverse));
-}
-.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-x-reverse: 0;
-  border-right-width: calc(0px * var(--tw-divide-x-reverse));
-  border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
-}
-.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
-}
-.divide-dotted > :not([hidden]) ~ :not([hidden]) {
-  border-style: dotted;
-}
-.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgba(229, 231, 235, var(--tw-divide-opacity));
-}
-.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 0.5;
-}
-.place-self-center {
-  place-self: center;
-}
-.self-end {
-  align-self: flex-end;
-}
-.justify-self-start {
-  justify-self: start;
-}
-.overflow-hidden {
-  overflow: hidden;
-}
-.overscroll-contain {
-  overscroll-behavior: contain;
-}
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.overflow-ellipsis {
-  text-overflow: ellipsis;
-}
-.whitespace-nowrap {
-  white-space: nowrap;
-}
-.break-words {
-  overflow-wrap: break-word;
-}
-.rounded-md {
-  border-radius: 0.375rem;
-}
-.border {
-  border-width: 1px;
-}
-.border-2 {
-  border-width: 2px;
-}
-.border-solid {
-  border-style: solid;
-}
-.border-black {
-  --tw-border-opacity: 1;
-  border-color: rgba(0, 0, 0, var(--tw-border-opacity));
-}
-.border-opacity-10 {
-  --tw-border-opacity: 0.1;
-}
-.bg-green-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
-}
-.bg-opacity-20 {
-  --tw-bg-opacity: 0.2;
-}
-.bg-gradient-to-r {
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
-}
-.from-red-300 {
-  --tw-gradient-from: #fca5a5;
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0));
-}
-.via-purple-200 {
-  --tw-gradient-stops: var(--tw-gradient-from), #ddd6fe,
-    var(--tw-gradient-to, rgba(221, 214, 254, 0));
-}
-.to-blue-400 {
-  --tw-gradient-to: #60a5fa;
-}
-.decoration-slice {
-  box-decoration-break: slice;
-}
-.decoration-clone {
-  box-decoration-break: clone;
-}
-.bg-cover {
-  background-size: cover;
-}
-.bg-local {
-  background-attachment: local;
-}
-.bg-clip-border {
-  background-clip: border-box;
-}
-.bg-top {
-  background-position: top;
-}
-.bg-no-repeat {
-  background-repeat: no-repeat;
-}
-.bg-origin-border {
-  background-origin: border-box;
-}
-.bg-origin-padding {
-  background-origin: padding-box;
-}
-.bg-origin-content {
-  background-origin: content-box;
-}
-.fill-current {
-  fill: currentColor;
-}
-.stroke-current {
-  stroke: currentColor;
-}
-.stroke-2 {
-  stroke-width: 2;
-}
-.object-cover {
-  object-fit: cover;
-}
-.object-bottom {
-  object-position: bottom;
-}
-.p-4 {
-  padding: 1rem;
-}
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.pt-1 {
-  padding-top: 0.25rem;
-}
-.pr-2 {
-  padding-right: 0.5rem;
-}
-.pb-3 {
-  padding-bottom: 0.75rem;
-}
-.pl-4 {
-  padding-left: 1rem;
-}
-.text-center {
-  text-align: center;
-}
-.align-middle {
-  vertical-align: middle;
-}
-.font-sans {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
-}
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-.font-medium {
-  font-weight: 500;
-}
-.uppercase {
-  text-transform: uppercase;
-}
-.not-italic {
-  font-style: normal;
-}
-.ordinal,
-.slashed-zero,
-.lining-nums,
-.oldstyle-nums,
-.proportional-nums,
-.tabular-nums,
-.diagonal-fractions,
-.stacked-fractions {
-  --tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
-  --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
-  --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
-  --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
-  --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
-    var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-.ordinal {
-  --tw-ordinal: ordinal;
-}
-.tabular-nums {
-  --tw-numeric-spacing: tabular-nums;
-}
-.diagonal-fractions {
-  --tw-numeric-fraction: diagonal-fractions;
-}
-.leading-relaxed {
-  line-height: 1.625;
-}
-.leading-5 {
-  line-height: 1.25rem;
-}
-.tracking-tight {
-  letter-spacing: -0.025em;
-}
-.text-indigo-500 {
-  --tw-text-opacity: 1;
-  color: rgba(99, 102, 241, var(--tw-text-opacity));
-}
-.text-opacity-10 {
-  --tw-text-opacity: 0.1;
-}
-.underline {
-  text-decoration: underline;
-}
-.antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.placeholder-green-300::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgba(110, 231, 183, var(--tw-placeholder-opacity));
-}
-.placeholder-opacity-60::placeholder {
-  --tw-placeholder-opacity: 0.6;
-}
-.opacity-90 {
-  opacity: 0.9;
-}
-.bg-blend-darken {
-  background-blend-mode: darken;
-}
-.bg-blend-difference {
-  background-blend-mode: difference;
-}
-.mix-blend-multiply {
-  mix-blend-mode: multiply;
-}
-.mix-blend-saturation {
-  mix-blend-mode: saturation;
-}
-.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);
-}
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px 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);
-}
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.outline-black {
-  outline: 2px dotted black;
-  outline-offset: 2px;
-}
-.ring {
-  --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(3px + 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-4 {
-  --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(4px + 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-white {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
-}
-.ring-opacity-40 {
-  --tw-ring-opacity: 0.4;
-}
-.ring-offset-2 {
-  --tw-ring-offset-width: 2px;
-}
-.ring-offset-blue-300 {
-  --tw-ring-offset-color: #93c5fd;
-}
-.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);
-}
-.filter {
-  filter: var(--tw-filter);
-}
-.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 {
-  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,
-    transform, filter, backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.delay-300 {
-  transition-delay: 300ms;
-}
-.duration-200 {
-  transition-duration: 200ms;
-}
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
diff --git a/tests/jit/relative-purge-paths.test.html b/tests/jit/relative-purge-paths.test.html
index 1e97f5fdf..45b844045 100644
--- a/tests/jit/relative-purge-paths.test.html
+++ b/tests/jit/relative-purge-paths.test.html
@@ -8,140 +8,6 @@
     <link rel="stylesheet" href="./tailwind.css" />
   </head>
   <body>
-    <div class="sr-only"></div>
-    <div class="content-center"></div>
-    <div class="items-start"></div>
-    <div class="self-end"></div>
-    <div class="animate-none"></div>
-    <div class="animate-spin"></div>
-    <div class="appearance-none"></div>
-    <div class="bg-local"></div>
-    <div class="bg-clip-border"></div>
-    <div class="bg-green-500"></div>
-    <div class="bg-gradient-to-r"></div>
-    <div class="bg-opacity-20"></div>
-    <div class="bg-top"></div>
-    <div class="bg-no-repeat"></div>
-    <div class="bg-cover"></div>
-    <div class="bg-origin-border bg-origin-padding bg-origin-content"></div>
-    <div class="border-collapse"></div>
-    <div class="border-black"></div>
-    <div class="border-opacity-10"></div>
-    <div class="rounded-md"></div>
-    <div class="border-solid"></div>
-    <div class="border"></div>
-    <div class="border-2"></div>
-    <div class="shadow"></div>
-    <div class="shadow-md"></div>
-    <div class="shadow-lg"></div>
-    <div class="decoration-clone decoration-slice"></div>
-    <div class="box-border"></div>
-    <div class="clear-left"></div>
-    <div class="container"></div>
-    <div class="cursor-pointer"></div>
-    <div class="hidden inline-grid"></div>
-    <div class="divide-gray-200"></div>
-    <div class="divide-opacity-50"></div>
-    <div class="divide-dotted"></div>
-    <div class="divide-x-2 divide-y-4 divide-x-0 divide-y-0"></div>
-    <div class="fill-current"></div>
-    <div class="flex-1"></div>
-    <div class="flex-row-reverse"></div>
-    <div class="flex-grow"></div>
-    <div class="flex-grow-0"></div>
-    <div class="flex-shrink"></div>
-    <div class="flex-shrink-0"></div>
-    <div class="flex-wrap"></div>
-    <div class="float-right"></div>
-    <div class="font-sans"></div>
-    <div class="text-2xl"></div>
-    <div class="antialiased"></div>
-    <div class="not-italic"></div>
-    <div class="tabular-nums ordinal diagonal-fractions"></div>
-    <div class="font-medium"></div>
-    <div class="gap-x-2 gap-y-3 gap-4"></div>
-    <div class="from-red-300 via-purple-200 to-blue-400"></div>
-    <div class="auto-cols-min"></div>
-    <div class="grid-flow-row"></div>
-    <div class="auto-rows-max"></div>
-    <div class="col-span-3"></div>
-    <div class="col-start-1"></div>
-    <div class="col-end-4"></div>
-    <div class="row-span-2"></div>
-    <div class="row-start-3"></div>
-    <div class="row-end-5"></div>
-    <div class="grid-cols-4"></div>
-    <div class="grid-rows-3"></div>
-    <div class="h-16"></div>
-    <div class="inset-0 inset-y-4 inset-x-2 top-6 right-8 bottom-12 left-16"></div>
-    <div class="isolate isolation-auto"></div>
-    <div class="justify-center"></div>
-    <div class="justify-items-end"></div>
-    <div class="justify-self-start"></div>
-    <div class="tracking-tight"></div>
-    <div class="leading-relaxed leading-5"></div>
-    <div class="list-inside"></div>
-    <div class="list-disc"></div>
-    <div class="m-4 my-2 mx-auto mt-0 mr-1 mb-3 ml-4"></div>
-    <div class="max-h-screen"></div>
-    <div class="max-w-full"></div>
-    <div class="min-h-0"></div>
-    <div class="min-w-min"></div>
-    <div class="object-cover"></div>
-    <div class="object-bottom"></div>
-    <div class="opacity-90"></div>
-    <div class="bg-blend-darken bg-blend-difference"></div>
-    <div class="mix-blend-multiply mix-blend-saturation"></div>
-    <div class="order-last order-2"></div>
-    <div class="outline-none outline-black"></div>
-    <div class="overflow-hidden"></div>
-    <div class="overscroll-contain"></div>
-    <div class="p-4 py-2 px-3 pt-1 pr-2 pb-3 pl-4"></div>
-    <div class="place-content-start"></div>
-    <div class="placeholder-green-300"></div>
-    <div class="placeholder-opacity-60"></div>
-    <div class="place-items-end"></div>
-    <div class="place-self-center"></div>
-    <div class="pointer-events-none"></div>
-    <div class="absolute"></div>
-    <div class="resize-none"></div>
-    <div class="ring-white"></div>
-    <div class="ring-offset-blue-300"></div>
-    <div class="ring-offset-2"></div>
-    <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"
-    ></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"
-    ></div>
-    <div class="rotate-3"></div>
-    <div class="scale-95"></div>
-    <div class="skew-y-12 skew-x-12"></div>
-    <div class="space-x-4 space-y-3 space-x-reverse space-y-reverse"></div>
-    <div class="stroke-current"></div>
-    <div class="stroke-2"></div>
-    <div class="table-fixed"></div>
-    <div class="text-center"></div>
-    <div class="text-indigo-500"></div>
-    <div class="underline"></div>
-    <div class="text-opacity-10"></div>
-    <div class="overflow-ellipsis truncate"></div>
-    <div class="uppercase"></div>
-    <div class="transform transform-gpu"></div>
-    <div class="origin-top-right"></div>
-    <div class="delay-300"></div>
-    <div class="duration-200"></div>
-    <div class="transition transition-all"></div>
-    <div class="ease-in-out"></div>
-    <div class="translate-x-5 -translate-x-4 translate-y-6 -translate-x-3"></div>
-    <div class="select-none"></div>
-    <div class="align-middle"></div>
-    <div class="invisible"></div>
-    <div class="whitespace-nowrap"></div>
-    <div class="w-12"></div>
-    <div class="break-words"></div>
-    <div class="z-30"></div>
+    <div class="font-bold"></div>
   </body>
 </html>
diff --git a/tests/jit/relative-purge-paths.test.js b/tests/jit/relative-purge-paths.test.js
index 1065f1052..65bac42be 100644
--- a/tests/jit/relative-purge-paths.test.js
+++ b/tests/jit/relative-purge-paths.test.js
@@ -1,5 +1,4 @@
 import postcss from 'postcss'
-import fs from 'fs'
 import path from 'path'
 import tailwind from '../../src/jit/index.js'
 
@@ -9,6 +8,10 @@ function run(input, config = {}) {
   })
 }
 
+function css(templates) {
+  return templates.join('')
+}
+
 test('relative purge paths', () => {
   let config = {
     purge: ['./tests/jit/relative-purge-paths.test.html'],
@@ -18,16 +21,17 @@ test('relative purge paths', () => {
     plugins: [],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
-    let expectedPath = path.resolve(__dirname, './relative-purge-paths.test.css')
-    let expected = fs.readFileSync(expectedPath, 'utf8')
-
-    expect(result.css).toMatchFormattedCss(expected)
+  return run(input, config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .font-bold {
+        font-weight: 700;
+      }
+    `)
   })
 })
diff --git a/tests/jit/resolve-defaults-at-rules.test.js b/tests/jit/resolve-defaults-at-rules.test.js
index 240422994..c3f4f722f 100644
--- a/tests/jit/resolve-defaults-at-rules.test.js
+++ b/tests/jit/resolve-defaults-at-rules.test.js
@@ -10,6 +10,10 @@ function run(input, config = {}) {
   })
 }
 
+function css(templates) {
+  return templates.join('')
+}
+
 test('basic utilities', async () => {
   let config = {
     mode: 'jit',
@@ -23,17 +27,17 @@ test('basic utilities', async () => {
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     /* --- */
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .rotate-3,
-      .skew-y-6,
-      .scale-x-110 {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -75,17 +79,17 @@ test('with pseudo-class variants', async () => {
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
-  let css = `
+  let input = 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 {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -127,16 +131,17 @@ test('with pseudo-element variants', async () => {
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     /* --- */
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .before\\:scale-x-110::before,
-      .after\\:rotate-3::after {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -176,16 +181,17 @@ test('with multi-class variants', async () => {
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     /* --- */
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .group-hover\\:scale-x-110,
-      .peer-focus\\:rotate-3 {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -223,16 +229,17 @@ test('with multi-class pseudo-element variants', async () => {
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
-  let css = `
+  let input = 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 {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -272,16 +279,17 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
-  let css = `
+  let input = 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 {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -321,7 +329,7 @@ test('with apply', async () => {
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     /* --- */
     @tailwind utilities;
@@ -370,19 +378,11 @@ test('with apply', async () => {
     }
   `
 
-  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 {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -457,16 +457,17 @@ test('with borders', async () => {
     corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     /* --- */
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .border,
-      .md\\:border-2 {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --tw-border-opacity: 1;
         border-color: rgba(229, 231, 235, var(--tw-border-opacity));
       }
@@ -500,21 +501,20 @@ test('with shadows', async () => {
     corePlugins: ['boxShadow', 'ringColor', 'ringWidth'],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     /* --- */
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .shadow,
-      .md\\:shadow-xl {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --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;
@@ -563,14 +563,14 @@ test('when no utilities that need the defaults are used', async () => {
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     /* --- */
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       /* --- */
     `)
   })
@@ -589,14 +589,14 @@ test('when a utility uses defaults but they do not exist', async () => {
     corePlugins: ['rotate'],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     /* --- */
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       /* --- */
       .rotate-3 {
         --tw-rotate: 3deg;
@@ -619,7 +619,7 @@ test('selectors are reduced to the lowest possible specificity', async () => {
     corePlugins: [],
   }
 
-  let css = `
+  let input = css`
     @defaults test {
       --color: black;
     }
@@ -641,12 +641,12 @@ test('selectors are reduced to the lowest possible specificity', async () => {
       color: var(--color);
     }
 
-    div[data-foo="bar"]#other {
+    div[data-foo='bar']#other {
       @defaults test;
       fill: var(--color);
     }
 
-    div[data-bar="baz"] {
+    div[data-bar='baz'] {
       @defaults test;
       stroke: var(--color);
     }
@@ -656,21 +656,17 @@ test('selectors are reduced to the lowest possible specificity', async () => {
       --article: var(--color);
     }
 
-    div[data-foo="bar"]#another::before {
+    div[data-foo='bar']#another::before {
       @defaults test;
       fill: var(--color);
     }
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .foo,
-      [id="app"],
-      [id="page"],
-      [id="other"],
-      [data-bar="baz"],
-      article,
-      [id="another"]::before {
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
         --color: black;
       }
 
@@ -688,11 +684,11 @@ test('selectors are reduced to the lowest possible specificity', async () => {
         color: var(--color);
       }
 
-      div[data-foo="bar"]#other {
+      div[data-foo='bar']#other {
         fill: var(--color);
       }
 
-      div[data-bar="baz"] {
+      div[data-bar='baz'] {
         stroke: var(--color);
       }
 
@@ -700,7 +696,7 @@ test('selectors are reduced to the lowest possible specificity', async () => {
         --article: var(--color);
       }
 
-      div[data-foo="bar"]#another::before {
+      div[data-foo='bar']#another::before {
         fill: var(--color);
       }
     `)
diff --git a/tests/jit/variants.test.css b/tests/jit/variants.test.css
index cfe240b75..666a15c96 100644
--- a/tests/jit/variants.test.css
+++ b/tests/jit/variants.test.css
@@ -1,110 +1,6 @@
-.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 {
+*,
+::before,
+::after {
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
diff --git a/tests/jit/variants.test.js b/tests/jit/variants.test.js
index 52967a9f5..b9dc78eeb 100644
--- a/tests/jit/variants.test.js
+++ b/tests/jit/variants.test.js
@@ -9,6 +9,10 @@ function run(input, config = {}) {
   })
 }
 
+function css(templates) {
+  return templates.join('')
+}
+
 test('variants', () => {
   let config = {
     darkMode: 'class',
@@ -19,13 +23,13 @@ test('variants', () => {
     plugins: [],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './variants.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
@@ -42,19 +46,19 @@ test('stacked peer variants', async () => {
     plugins: [],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
   `
 
-  let expected = `
+  let expected = css`
     .peer:disabled:focus:hover ~ .peer-disabled\\:peer-focus\\:peer-hover\\:border-blue-500 {
       --tw-border-opacity: 1;
       border-color: rgba(59, 130, 246, var(--tw-border-opacity));
     }
   `
 
-  let result = await run(css, config)
+  let result = await run(input, config)
   expect(result.css).toIncludeCss(expected)
 })
diff --git a/tests/sanity.test.js b/tests/sanity.test.js
index c5e896b49..419d37f76 100644
--- a/tests/sanity.test.js
+++ b/tests/sanity.test.js
@@ -4,6 +4,16 @@ import postcss from 'postcss'
 import tailwind from '../src/index'
 import config from '../stubs/defaultConfig.stub.js'
 
+function dropTailwindHeader(css) {
+  let [header, ...lines] = css.split('\n')
+
+  expect(
+    /\/*! tailwindcss v\d*\.\d*\.\d* \| MIT License \| https:\/\/tailwindcss.com \*\//g.test(header)
+  ).toBe(true)
+
+  return lines.join('\n')
+}
+
 it('generates the right CSS using the default settings', () => {
   const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
   const input = fs.readFileSync(inputPath, 'utf8')
@@ -16,7 +26,7 @@ it('generates the right CSS using the default settings', () => {
         'utf8'
       )
 
-      expect(result.css).toBe(expected)
+      expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
     })
 })
 
@@ -32,7 +42,7 @@ it('generates the right CSS when "important" is enabled', () => {
         'utf8'
       )
 
-      expect(result.css).toBe(expected)
+      expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
     })
 })
 
@@ -48,7 +58,7 @@ it('generates the right CSS when using @import instead of @tailwind', () => {
         'utf8'
       )
 
-      expect(result.css).toBe(expected)
+      expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
     })
 })
 
@@ -69,7 +79,7 @@ it('generates the right CSS when enabling flagged features', () => {
         'utf8'
       )
 
-      expect(result.css).toBe(expected)
+      expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
     })
 })
 
@@ -97,7 +107,7 @@ it('generates the right CSS when color opacity plugins are disabled', () => {
         'utf8'
       )
 
-      expect(result.css).toBe(expected)
+      expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
     })
 })
 
@@ -139,6 +149,6 @@ it('generates the right CSS when "important" is enabled', () => {
         'utf8'
       )
 
-      expect(result.css).toBe(expected)
+      expect(dropTailwindHeader(result.css)).toBe(dropTailwindHeader(expected))
     })
 })