From e37931ba65922842db6d6bc124210f8762fa4d7d Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 3 Sep 2021 13:48:16 +0200
Subject: [PATCH] JIT by default - move tests and make them consistent (#5374)

* move `./tests/jit` to `./tests`

* make tests consistent

Abstracted a `run` function and some syntax highlighting helpers for
`html`, `css` and `javascript`.
---
 tests/{jit => }/animations.test.js            |  48 +--
 tests/{jit => }/apply.test.css                |   0
 tests/{jit => }/apply.test.html               |   0
 tests/apply.test.js                           | 256 ++++++++++++++++
 tests/{jit => }/arbitrary-values.test.css     |   0
 tests/{jit => }/arbitrary-values.test.html    |   0
 tests/{jit => }/arbitrary-values.test.js      |  15 +-
 tests/{jit => }/basic-usage.test.css          |   0
 tests/{jit => }/basic-usage.test.html         |   0
 tests/{jit => }/basic-usage.test.js           |  14 +-
 .../collapse-adjacent-rules.test.css          |   0
 .../collapse-adjacent-rules.test.html         |   0
 tests/collapse-adjacent-rules.test.js         |  56 ++++
 .../{jit => }/color-opacity-modifiers.test.js |  97 ++----
 tests/configurePlugins.test.js                |   7 +-
 tests/containerPlugin.test.js                 |  77 +----
 tests/{jit => }/context-reuse.test.html       |   0
 tests/{jit => }/context-reuse.test.js         |   0
 tests/{jit => }/context-reuse.worker.js       |   0
 tests/{jit => }/custom-extractors.test.css    |   0
 tests/{jit => }/custom-extractors.test.html   |   0
 tests/{jit => }/custom-extractors.test.js     |  43 +--
 tests/{jit => }/custom-separator.test.css     |   0
 tests/{jit => }/custom-separator.test.html    |   0
 tests/{jit => }/custom-separator.test.js      |  22 +-
 tests/custom-transformers.test.js             |  66 +++++
 tests/customConfig.test.js                    | 102 +------
 tests/{jit => }/dark-mode.test.js             |  26 +-
 tests/extractor-edge-cases.test.js            |  29 ++
 tests/{jit => }/import-syntax.test.css        |   0
 tests/{jit => }/import-syntax.test.html       |   0
 tests/{jit => }/import-syntax.test.js         |  19 +-
 tests/{jit => }/important-boolean.test.css    |   0
 tests/{jit => }/important-boolean.test.html   |   0
 tests/{jit => }/important-boolean.test.js     |  13 +-
 .../important-modifier-prefix.test.css        |   0
 .../important-modifier-prefix.test.html       |   0
 .../important-modifier-prefix.test.js         |  14 +-
 tests/{jit => }/important-modifier.test.css   |   0
 tests/{jit => }/important-modifier.test.html  |   0
 tests/{jit => }/important-modifier.test.js    |  14 +-
 tests/{jit => }/important-selector.test.css   |   0
 tests/{jit => }/important-selector.test.html  |   0
 tests/{jit => }/important-selector.test.js    |  13 +-
 tests/jit/apply.test.js                       | 278 ------------------
 tests/jit/collapse-adjacent-rules.test.js     |  64 ----
 tests/jit/custom-transformers.test.js         |  85 ------
 tests/jit/extractor-edge-cases.test.js        |  55 ----
 tests/jit/relative-purge-paths.test.js        |  36 ---
 tests/{jit => }/kitchen-sink.test.css         |   0
 tests/{jit => }/kitchen-sink.test.html        |   0
 tests/{jit => }/kitchen-sink.test.js          |  12 +-
 tests/{jit => }/layer-at-rules.test.js        |  18 +-
 .../{jit => }/layer-without-tailwind.test.css |   0
 .../layer-without-tailwind.test.html          |   0
 .../{jit => }/layer-without-tailwind.test.js  |  36 +--
 tests/{jit => }/modify-selectors.test.css     |   0
 tests/{jit => }/modify-selectors.test.html    |   0
 tests/{jit => }/modify-selectors.test.js      |  12 +-
 tests/{jit => }/mutable.test.css              |   0
 tests/{jit => }/mutable.test.html             |   0
 tests/{jit => }/mutable.test.js               |  15 +-
 tests/{jit => }/opacity.test.css              |   0
 tests/{jit => }/opacity.test.html             |   0
 tests/{jit => }/opacity.test.js               |  14 +-
 tests/{jit => }/parallel-variants.test.js     |  24 +-
 tests/plugins/animation.test.js               | 152 ----------
 tests/plugins/fontSize.test.js                |  36 +--
 tests/plugins/gradientColorStops.test.js      |  25 +-
 tests/{jit => }/prefix.fn.test.css            |   0
 tests/{jit => }/prefix.fn.test.html           |   0
 tests/{jit => }/prefix.fn.test.js             |  15 +-
 tests/{jit => }/prefix.test.css               |   0
 tests/{jit => }/prefix.test.html              |   0
 tests/{jit => }/prefix.test.js                |  12 +-
 tests/{jit => }/raw-content.test.css          |   0
 tests/{jit => }/raw-content.test.html         |   0
 tests/{jit => }/raw-content.test.js           |  31 +-
 .../{jit => }/relative-purge-paths.test.html  |   0
 tests/relative-purge-paths.test.js            |  22 ++
 .../resolve-defaults-at-rules.test.js         | 106 +------
 .../responsive-and-variants-atrules.test.css  |   0
 .../responsive-and-variants-atrules.test.html |   0
 .../responsive-and-variants-atrules.test.js   |  14 +-
 tests/{jit => }/svelte-syntax.test.css        |   0
 tests/{jit => }/svelte-syntax.test.js         |  12 +-
 tests/{jit => }/svelte-syntax.test.svelte     |   0
 tests/{jit => }/tailwind-screens.test.js      |  40 +--
 tests/util/invokePlugin.js                    |   2 +-
 tests/util/run.js                             |  19 ++
 tests/{jit => }/variants.test.css             |   0
 tests/{jit => }/variants.test.html            |   0
 tests/{jit => }/variants.test.js              |  16 +-
 93 files changed, 622 insertions(+), 1460 deletions(-)
 rename tests/{jit => }/animations.test.js (75%)
 rename tests/{jit => }/apply.test.css (100%)
 rename tests/{jit => }/apply.test.html (100%)
 create mode 100644 tests/apply.test.js
 rename tests/{jit => }/arbitrary-values.test.css (100%)
 rename tests/{jit => }/arbitrary-values.test.html (100%)
 rename tests/{jit => }/arbitrary-values.test.js (51%)
 rename tests/{jit => }/basic-usage.test.css (100%)
 rename tests/{jit => }/basic-usage.test.html (100%)
 rename tests/{jit => }/basic-usage.test.js (65%)
 rename tests/{jit => }/collapse-adjacent-rules.test.css (100%)
 rename tests/{jit => }/collapse-adjacent-rules.test.html (100%)
 create mode 100644 tests/collapse-adjacent-rules.test.js
 rename tests/{jit => }/color-opacity-modifiers.test.js (55%)
 rename tests/{jit => }/context-reuse.test.html (100%)
 rename tests/{jit => }/context-reuse.test.js (100%)
 rename tests/{jit => }/context-reuse.worker.js (100%)
 rename tests/{jit => }/custom-extractors.test.css (100%)
 rename tests/{jit => }/custom-extractors.test.html (100%)
 rename tests/{jit => }/custom-extractors.test.js (60%)
 rename tests/{jit => }/custom-separator.test.css (100%)
 rename tests/{jit => }/custom-separator.test.html (100%)
 rename tests/{jit => }/custom-separator.test.js (60%)
 create mode 100644 tests/custom-transformers.test.js
 rename tests/{jit => }/dark-mode.test.js (82%)
 create mode 100644 tests/extractor-edge-cases.test.js
 rename tests/{jit => }/import-syntax.test.css (100%)
 rename tests/{jit => }/import-syntax.test.html (100%)
 rename tests/{jit => }/import-syntax.test.js (60%)
 rename tests/{jit => }/important-boolean.test.css (100%)
 rename tests/{jit => }/important-boolean.test.html (100%)
 rename tests/{jit => }/important-boolean.test.js (83%)
 rename tests/{jit => }/important-modifier-prefix.test.css (100%)
 rename tests/{jit => }/important-modifier-prefix.test.html (100%)
 rename tests/{jit => }/important-modifier-prefix.test.js (67%)
 rename tests/{jit => }/important-modifier.test.css (100%)
 rename tests/{jit => }/important-modifier.test.html (100%)
 rename tests/{jit => }/important-modifier.test.js (65%)
 rename tests/{jit => }/important-selector.test.css (100%)
 rename tests/{jit => }/important-selector.test.html (100%)
 rename tests/{jit => }/important-selector.test.js (83%)
 delete mode 100644 tests/jit/apply.test.js
 delete mode 100644 tests/jit/collapse-adjacent-rules.test.js
 delete mode 100644 tests/jit/custom-transformers.test.js
 delete mode 100644 tests/jit/extractor-edge-cases.test.js
 delete mode 100644 tests/jit/relative-purge-paths.test.js
 rename tests/{jit => }/kitchen-sink.test.css (100%)
 rename tests/{jit => }/kitchen-sink.test.html (100%)
 rename tests/{jit => }/kitchen-sink.test.js (93%)
 rename tests/{jit => }/layer-at-rules.test.js (74%)
 rename tests/{jit => }/layer-without-tailwind.test.css (100%)
 rename tests/{jit => }/layer-without-tailwind.test.html (100%)
 rename tests/{jit => }/layer-without-tailwind.test.js (64%)
 rename tests/{jit => }/modify-selectors.test.css (100%)
 rename tests/{jit => }/modify-selectors.test.html (100%)
 rename tests/{jit => }/modify-selectors.test.js (82%)
 rename tests/{jit => }/mutable.test.css (100%)
 rename tests/{jit => }/mutable.test.html (100%)
 rename tests/{jit => }/mutable.test.js (81%)
 rename tests/{jit => }/opacity.test.css (100%)
 rename tests/{jit => }/opacity.test.html (100%)
 rename tests/{jit => }/opacity.test.js (63%)
 rename tests/{jit => }/parallel-variants.test.js (66%)
 delete mode 100644 tests/plugins/animation.test.js
 rename tests/{jit => }/prefix.fn.test.css (100%)
 rename tests/{jit => }/prefix.fn.test.html (100%)
 rename tests/{jit => }/prefix.fn.test.js (64%)
 rename tests/{jit => }/prefix.test.css (100%)
 rename tests/{jit => }/prefix.test.html (100%)
 rename tests/{jit => }/prefix.test.js (86%)
 rename tests/{jit => }/raw-content.test.css (100%)
 rename tests/{jit => }/raw-content.test.html (100%)
 rename tests/{jit => }/raw-content.test.js (64%)
 rename tests/{jit => }/relative-purge-paths.test.html (100%)
 create mode 100644 tests/relative-purge-paths.test.js
 rename tests/{jit => }/resolve-defaults-at-rules.test.js (87%)
 rename tests/{jit => }/responsive-and-variants-atrules.test.css (100%)
 rename tests/{jit => }/responsive-and-variants-atrules.test.html (100%)
 rename tests/{jit => }/responsive-and-variants-atrules.test.js (83%)
 rename tests/{jit => }/svelte-syntax.test.css (100%)
 rename tests/{jit => }/svelte-syntax.test.js (65%)
 rename tests/{jit => }/svelte-syntax.test.svelte (100%)
 rename tests/{jit => }/tailwind-screens.test.js (55%)
 create mode 100644 tests/util/run.js
 rename tests/{jit => }/variants.test.css (100%)
 rename tests/{jit => }/variants.test.html (100%)
 rename tests/{jit => }/variants.test.js (78%)

diff --git a/tests/jit/animations.test.js b/tests/animations.test.js
similarity index 75%
rename from tests/jit/animations.test.js
rename to tests/animations.test.js
index 6eb731fe5..f167b3717 100644
--- a/tests/jit/animations.test.js
+++ b/tests/animations.test.js
@@ -1,18 +1,10 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, html, css } from './util/run'
 
 test('basic', () => {
   let config = {
     content: [
       {
-        raw: `
+        raw: html`
           <div class="animate-spin"></div>
           <div class="hover:animate-ping"></div>
           <div class="group-hover:animate-bounce"></div>
@@ -21,10 +13,8 @@ test('basic', () => {
     ],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       @keyframes spin {
         to {
           transform: rotate(360deg);
@@ -63,7 +53,7 @@ test('basic', () => {
 
 test('custom', () => {
   let config = {
-    content: [{ raw: `<div class="animate-one"></div>` }],
+    content: [{ raw: html`<div class="animate-one"></div>` }],
     theme: {
       extend: {
         keyframes: {
@@ -76,10 +66,8 @@ test('custom', () => {
     },
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       @keyframes one {
         to {
           transform: rotate(360deg);
@@ -108,10 +96,8 @@ test('custom prefixed', () => {
     },
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       @keyframes tw-one {
         to {
           transform: rotate(360deg);
@@ -126,7 +112,7 @@ test('custom prefixed', () => {
 
 test('multiple', () => {
   let config = {
-    content: [{ raw: `<div class="animate-multiple"></div>` }],
+    content: [{ raw: html`<div class="animate-multiple"></div>` }],
     theme: {
       extend: {
         animation: {
@@ -136,10 +122,8 @@ test('multiple', () => {
     },
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       @keyframes bounce {
         0%,
         100% {
@@ -165,7 +149,7 @@ test('multiple', () => {
 
 test('multiple custom', () => {
   let config = {
-    content: [{ raw: `<div class="animate-multiple"></div>` }],
+    content: [{ raw: html`<div class="animate-multiple"></div>` }],
     theme: {
       extend: {
         keyframes: {
@@ -179,10 +163,8 @@ test('multiple custom', () => {
     },
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       @keyframes one {
         to {
           transform: rotate(360deg);
diff --git a/tests/jit/apply.test.css b/tests/apply.test.css
similarity index 100%
rename from tests/jit/apply.test.css
rename to tests/apply.test.css
diff --git a/tests/jit/apply.test.html b/tests/apply.test.html
similarity index 100%
rename from tests/jit/apply.test.html
rename to tests/apply.test.html
diff --git a/tests/apply.test.js b/tests/apply.test.js
new file mode 100644
index 000000000..0c96c273d
--- /dev/null
+++ b/tests/apply.test.js
@@ -0,0 +1,256 @@
+import fs from 'fs'
+import path from 'path'
+
+import { run, css } from './util/run'
+
+test('@apply', () => {
+  let config = {
+    darkMode: 'class',
+    content: [path.resolve(__dirname, './apply.test.html')],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .basic-example {
+        @apply px-4 py-2 bg-blue-500 rounded-md;
+      }
+      .class-order {
+        @apply pt-4 pr-1 px-3 py-7 p-8;
+      }
+      .with-additional-properties {
+        font-weight: 500;
+        @apply text-right;
+      }
+      .variants {
+        @apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium font-semibold;
+      }
+      .only-variants {
+        @apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium;
+      }
+      .apply-group-variant {
+        @apply group-hover:text-center lg:group-hover:text-left;
+      }
+      .apply-dark-variant {
+        @apply dark:text-center dark:hover:text-right lg:dark:text-left;
+      }
+      .apply-custom-utility {
+        @apply custom-util hover:custom-util lg:custom-util xl:focus:custom-util;
+      }
+      .multiple,
+      .selectors {
+        @apply px-4 py-2 bg-blue-500 rounded-md;
+      }
+      .multiple-variants,
+      .selectors-variants {
+        @apply hover:text-center active:text-right lg:focus:text-left;
+      }
+      .multiple-group,
+      .selectors-group {
+        @apply group-hover:text-center lg:group-hover:text-left;
+      }
+      /* TODO: This works but the generated CSS is unnecessarily verbose. */
+      .complex-utilities {
+        @apply ordinal tabular-nums focus:diagonal-fractions shadow-lg hover:shadow-xl;
+      }
+      .basic-nesting-parent {
+        .basic-nesting-child {
+          @apply font-bold hover:font-normal;
+        }
+      }
+      .use-base-only-a {
+        @apply font-bold;
+      }
+      .use-base-only-b {
+        @apply use-base-only-a font-normal;
+      }
+      .use-dependant-only-a {
+        @apply font-bold;
+      }
+      .use-dependant-only-b {
+        @apply use-dependant-only-a font-normal;
+      }
+      .btn {
+        @apply font-bold py-2 px-4 rounded;
+      }
+      .btn-blue {
+        @apply btn bg-blue-500 hover:bg-blue-700 text-white;
+      }
+      .recursive-apply-a {
+        @apply font-black sm:font-thin;
+      }
+      .recursive-apply-b {
+        @apply recursive-apply-a font-semibold md:font-extralight;
+      }
+      .recursive-apply-c {
+        @apply recursive-apply-b font-bold lg:font-light;
+      }
+      .use-with-other-properties-base {
+        color: green;
+        @apply font-bold;
+      }
+      .use-with-other-properties-component {
+        @apply use-with-other-properties-base;
+      }
+      .add-sibling-properties {
+        padding: 2rem;
+        @apply px-4 hover:px-2 lg:px-10 xl:focus:px-1;
+        padding-top: 3px;
+        @apply use-with-other-properties-base;
+      }
+
+      h1 {
+        @apply text-2xl lg:text-2xl sm:text-3xl;
+      }
+      h2 {
+        @apply text-2xl;
+        @apply lg:text-2xl;
+        @apply sm:text-2xl;
+      }
+
+      .important-modifier {
+        @apply px-4 !rounded-md;
+      }
+
+      .important-modifier-variant {
+        @apply px-4 hover:!rounded-md;
+      }
+    }
+
+    @layer utilities {
+      .custom-util {
+        custom: stuff;
+      }
+
+      .foo {
+        @apply animate-spin;
+      }
+
+      .bar {
+        @apply animate-pulse !important;
+      }
+    }
+  `
+
+  return run(input, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './apply.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchFormattedCss(expected)
+  })
+})
+
+test('@apply error with unknown utility', async () => {
+  let config = {
+    darkMode: 'class',
+    content: [path.resolve(__dirname, './apply.test.html')],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .foo {
+        @apply a-utility-that-does-not-exist;
+      }
+    }
+  `
+
+  await expect(run(input, config)).rejects.toThrowError('class does not exist')
+})
+
+test('@apply error with nested @screen', async () => {
+  let config = {
+    darkMode: 'class',
+    content: [path.resolve(__dirname, './apply.test.html')],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .foo {
+        @screen md {
+          @apply text-black;
+        }
+      }
+    }
+  `
+
+  await expect(run(input, config)).rejects.toThrowError(
+    '@apply is not supported within nested at-rules like @screen'
+  )
+})
+
+test('@apply error with nested @anyatrulehere', async () => {
+  let config = {
+    darkMode: 'class',
+    content: [path.resolve(__dirname, './apply.test.html')],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .foo {
+        @genie {
+          @apply text-black;
+        }
+      }
+    }
+  `
+
+  await expect(run(input, config)).rejects.toThrowError(
+    '@apply is not supported within nested at-rules like @genie'
+  )
+})
+
+test('@apply error when using .group utility', async () => {
+  let config = {
+    darkMode: 'class',
+    content: [{ raw: '<div class="foo"></div>' }],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .foo {
+        @apply group;
+      }
+    }
+  `
+
+  await expect(run(input, config)).rejects.toThrowError(
+    `@apply should not be used with the 'group' utility`
+  )
+})
+
+test('@apply error when using a prefixed .group utility', async () => {
+  let config = {
+    prefix: 'tw-',
+    darkMode: 'class',
+    content: [{ raw: '<div class="foo"></div>' }],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer components {
+      .foo {
+        @apply tw-group;
+      }
+    }
+  `
+
+  await expect(run(input, config)).rejects.toThrowError(
+    `@apply should not be used with the 'tw-group' utility`
+  )
+})
diff --git a/tests/jit/arbitrary-values.test.css b/tests/arbitrary-values.test.css
similarity index 100%
rename from tests/jit/arbitrary-values.test.css
rename to tests/arbitrary-values.test.css
diff --git a/tests/jit/arbitrary-values.test.html b/tests/arbitrary-values.test.html
similarity index 100%
rename from tests/jit/arbitrary-values.test.html
rename to tests/arbitrary-values.test.html
diff --git a/tests/jit/arbitrary-values.test.js b/tests/arbitrary-values.test.js
similarity index 51%
rename from tests/jit/arbitrary-values.test.js
rename to tests/arbitrary-values.test.js
index 15b053d62..e75d7f988 100644
--- a/tests/jit/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -1,25 +1,14 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
-}
+import { run } from './util/run'
 
 test('arbitrary values', () => {
   let config = {
     content: [path.resolve(__dirname, './arbitrary-values.test.html')],
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  let css = `
-    @tailwind utilities;
-  `
-
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     let expectedPath = path.resolve(__dirname, './arbitrary-values.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/basic-usage.test.css b/tests/basic-usage.test.css
similarity index 100%
rename from tests/jit/basic-usage.test.css
rename to tests/basic-usage.test.css
diff --git a/tests/jit/basic-usage.test.html b/tests/basic-usage.test.html
similarity index 100%
rename from tests/jit/basic-usage.test.html
rename to tests/basic-usage.test.html
diff --git a/tests/jit/basic-usage.test.js b/tests/basic-usage.test.js
similarity index 65%
rename from tests/jit/basic-usage.test.js
rename to tests/basic-usage.test.js
index 2430b2d16..33adf24df 100644
--- a/tests/jit/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -1,24 +1,12 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
+import { run, css } from './util/run'
 
 test('basic usage', () => {
   let config = {
     content: [path.resolve(__dirname, './basic-usage.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
   let input = css`
diff --git a/tests/jit/collapse-adjacent-rules.test.css b/tests/collapse-adjacent-rules.test.css
similarity index 100%
rename from tests/jit/collapse-adjacent-rules.test.css
rename to tests/collapse-adjacent-rules.test.css
diff --git a/tests/jit/collapse-adjacent-rules.test.html b/tests/collapse-adjacent-rules.test.html
similarity index 100%
rename from tests/jit/collapse-adjacent-rules.test.html
rename to tests/collapse-adjacent-rules.test.html
diff --git a/tests/collapse-adjacent-rules.test.js b/tests/collapse-adjacent-rules.test.js
new file mode 100644
index 000000000..709f71269
--- /dev/null
+++ b/tests/collapse-adjacent-rules.test.js
@@ -0,0 +1,56 @@
+import fs from 'fs'
+import path from 'path'
+
+import { run, css } from './util/run'
+
+test('collapse adjacent rules', () => {
+  let config = {
+    content: [path.resolve(__dirname, './collapse-adjacent-rules.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind base;
+    @font-face {
+      font-family: 'Inter';
+      src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
+    }
+    @font-face {
+      font-family: 'Gilroy';
+      src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
+    }
+    @page {
+      margin: 1cm;
+    }
+    @tailwind components;
+    @tailwind utilities;
+    @layer base {
+      @font-face {
+        font-family: 'Poppins';
+        src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
+      }
+      @font-face {
+        font-family: 'Proxima Nova';
+        src: url('/fonts/ProximaNova.woff2') format('woff2'),
+          url('/fonts/ProximaNova.woff') format('woff');
+      }
+    }
+    .foo,
+    .bar {
+      color: black;
+    }
+    .foo,
+    .bar {
+      font-weight: 700;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './collapse-adjacent-rules.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchFormattedCss(expected)
+  })
+})
diff --git a/tests/jit/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js
similarity index 55%
rename from tests/jit/color-opacity-modifiers.test.js
rename to tests/color-opacity-modifiers.test.js
index 2e716fb39..0f5b9438f 100644
--- a/tests/jit/color-opacity-modifiers.test.js
+++ b/tests/color-opacity-modifiers.test.js
@@ -1,30 +1,12 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  const { currentTestName } = expect.getState()
-
-  return postcss(tailwind(config)).process(input, {
-    from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  })
-}
+import { run, css, html } from './util/run'
 
 test('basic color opacity modifier', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="bg-red-500/50"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="bg-red-500/50"></div>` }],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .bg-red-500\\/50 {
         background-color: rgba(239, 68, 68, 0.5);
       }
@@ -34,11 +16,7 @@ test('basic color opacity modifier', async () => {
 
 test('colors with slashes are matched first', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="bg-red-500/50"></div>',
-      },
-    ],
+    content: [{ raw: html`<div class="bg-red-500/50"></div>` }],
     theme: {
       extend: {
         colors: {
@@ -46,13 +24,10 @@ test('colors with slashes are matched first', async () => {
         },
       },
     },
-    plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .bg-red-500\\/50 {
         --tw-bg-opacity: 1;
         background-color: rgba(255, 0, 0, var(--tw-bg-opacity));
@@ -63,19 +38,11 @@ test('colors with slashes are matched first', async () => {
 
 test('arbitrary color opacity modifier', async () => {
   let config = {
-    content: [
-      {
-        raw: 'bg-red-500/[var(--opacity)]',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="bg-red-500/[var(--opacity)]"></div>` }],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .bg-red-500\\/\\[var\\(--opacity\\)\\] {
         background-color: rgba(239, 68, 68, var(--opacity));
       }
@@ -85,29 +52,17 @@ test('arbitrary color opacity modifier', async () => {
 
 test('missing alpha generates nothing', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="bg-red-500/"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="bg-red-500/"></div>` }],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(``)
   })
 })
 
 test('values not in the opacity config are ignored', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="bg-red-500/29"></div>',
-      },
-    ],
+    content: [{ raw: html`<div class="bg-red-500/29"></div>` }],
     theme: {
       opacity: {
         0: '0',
@@ -117,23 +72,16 @@ test('values not in the opacity config are ignored', async () => {
         100: '1',
       },
     },
-    plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(``)
   })
 })
 
 test('function colors are supported', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="bg-blue/50"></div>',
-      },
-    ],
+    content: [{ raw: html`<div class="bg-blue/50"></div>` }],
     theme: {
       colors: {
         blue: ({ opacityValue }) => {
@@ -141,13 +89,10 @@ test('function colors are supported', async () => {
         },
       },
     },
-    plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .bg-blue\\/50 {
         background-color: rgba(var(--colors-blue), 0.5);
       }
@@ -159,7 +104,7 @@ test('utilities that support any type are supported', async () => {
   let config = {
     content: [
       {
-        raw: `
+        raw: html`
           <div class="from-red-500/50"></div>
           <div class="fill-red-500/25"></div>
           <div class="placeholder-red-500/75"></div>
@@ -174,10 +119,8 @@ test('utilities that support any type are supported', async () => {
     plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .from-red-500\\/50 {
         --tw-gradient-from: rgba(239, 68, 68, 0.5);
         --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0));
diff --git a/tests/configurePlugins.test.js b/tests/configurePlugins.test.js
index 03d9852a0..85828bf78 100644
--- a/tests/configurePlugins.test.js
+++ b/tests/configurePlugins.test.js
@@ -3,12 +3,7 @@ import configurePlugins from '../src/util/configurePlugins'
 test('setting a plugin to false removes it', () => {
   const plugins = ['fontSize', 'display', 'backgroundPosition']
 
-  const configuredPlugins = configurePlugins(
-    {
-      display: false,
-    },
-    plugins
-  )
+  const configuredPlugins = configurePlugins({ display: false }, plugins)
 
   expect(configuredPlugins).toEqual(['fontSize', 'backgroundPosition'])
 })
diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js
index 4bb8615fb..f2d19ec1e 100644
--- a/tests/containerPlugin.test.js
+++ b/tests/containerPlugin.test.js
@@ -1,32 +1,9 @@
-import path from 'path'
-import postcss from 'postcss'
-
-import tailwind from '../src'
-
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
-
-function html(templates) {
-  return templates.join('')
-}
+import { run, html, css } from './util/run'
 
 test('options are not required', () => {
-  let config = {
-    content: [{ raw: html`<div class="container"></div>` }],
-  }
+  let config = { content: [{ raw: html`<div class="container"></div>` }] }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .container {
         width: 100%;
@@ -70,11 +47,7 @@ test('screens can be passed explicitly', () => {
     },
   }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .container {
         width: 100%;
@@ -103,11 +76,7 @@ test('screens are ordered ascending by min-width', () => {
     },
   }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .container {
         width: 100%;
@@ -140,11 +109,7 @@ test('screens are deduplicated by min-width', () => {
     },
   }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .container {
         width: 100%;
@@ -173,11 +138,7 @@ test('the container can be centered by default', () => {
     },
   }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .container {
         width: 100%;
@@ -223,11 +184,7 @@ test('horizontal padding can be included by default', () => {
     },
   }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .container {
         width: 100%;
@@ -284,11 +241,7 @@ test('responsive horizontal padding can be included by default', () => {
     },
   }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .container {
         width: 100%;
@@ -337,11 +290,7 @@ test('setting all options at once', () => {
     },
   }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .container {
         width: 100%;
@@ -374,11 +323,7 @@ test('container can use variants', () => {
     },
   }
 
-  let content = css`
-    @tailwind components;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 1024px) {
         .lg\\:hover\\:container:hover {
diff --git a/tests/jit/context-reuse.test.html b/tests/context-reuse.test.html
similarity index 100%
rename from tests/jit/context-reuse.test.html
rename to tests/context-reuse.test.html
diff --git a/tests/jit/context-reuse.test.js b/tests/context-reuse.test.js
similarity index 100%
rename from tests/jit/context-reuse.test.js
rename to tests/context-reuse.test.js
diff --git a/tests/jit/context-reuse.worker.js b/tests/context-reuse.worker.js
similarity index 100%
rename from tests/jit/context-reuse.worker.js
rename to tests/context-reuse.worker.js
diff --git a/tests/jit/custom-extractors.test.css b/tests/custom-extractors.test.css
similarity index 100%
rename from tests/jit/custom-extractors.test.css
rename to tests/custom-extractors.test.css
diff --git a/tests/jit/custom-extractors.test.html b/tests/custom-extractors.test.html
similarity index 100%
rename from tests/jit/custom-extractors.test.html
rename to tests/custom-extractors.test.html
diff --git a/tests/jit/custom-extractors.test.js b/tests/custom-extractors.test.js
similarity index 60%
rename from tests/jit/custom-extractors.test.js
rename to tests/custom-extractors.test.js
index a24b7a258..042ff2787 100644
--- a/tests/jit/custom-extractors.test.js
+++ b/tests/custom-extractors.test.js
@@ -1,25 +1,15 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
 
-function run(input, config = {}) {
-  jest.resetModules()
-  let tailwind = require('../../src')
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run } from './util/run'
 
 function customExtractor(content) {
-  const matches = content.match(/class="([^"]+)"/)
+  let matches = content.match(/class="([^"]+)"/)
   return matches ? matches[1].split(/\s+/) : []
 }
 
-const css = `
-  @tailwind utilities;
-`
-const expectedPath = path.resolve(__dirname, './custom-extractors.test.css')
-const expected = fs.readFileSync(expectedPath, 'utf8')
+let expectedPath = path.resolve(__dirname, './custom-extractors.test.css')
+let expected = fs.readFileSync(expectedPath, 'utf8')
 
 test('defaultExtractor', () => {
   let config = {
@@ -29,12 +19,9 @@ test('defaultExtractor', () => {
         defaultExtractor: customExtractor,
       },
     },
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(expected)
   })
 })
@@ -52,12 +39,9 @@ test('extractors array', () => {
         ],
       },
     },
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(expected)
   })
 })
@@ -68,12 +52,9 @@ test('extract function', () => {
       content: [path.resolve(__dirname, './custom-extractors.test.html')],
       extract: customExtractor,
     },
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(expected)
   })
 })
@@ -86,12 +67,9 @@ test('extract.DEFAULT', () => {
         DEFAULT: customExtractor,
       },
     },
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(expected)
   })
 })
@@ -104,12 +82,9 @@ test('extract.{extension}', () => {
         html: customExtractor,
       },
     },
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(expected)
   })
 })
diff --git a/tests/jit/custom-separator.test.css b/tests/custom-separator.test.css
similarity index 100%
rename from tests/jit/custom-separator.test.css
rename to tests/custom-separator.test.css
diff --git a/tests/jit/custom-separator.test.html b/tests/custom-separator.test.html
similarity index 100%
rename from tests/jit/custom-separator.test.html
rename to tests/custom-separator.test.html
diff --git a/tests/jit/custom-separator.test.js b/tests/custom-separator.test.js
similarity index 60%
rename from tests/jit/custom-separator.test.js
rename to tests/custom-separator.test.js
index 27138b911..1040f2afc 100644
--- a/tests/jit/custom-separator.test.js
+++ b/tests/custom-separator.test.js
@@ -1,27 +1,16 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run } from './util/run'
 
 test('custom separator', () => {
   let config = {
     darkMode: 'class',
     content: [path.resolve(__dirname, './custom-separator.test.html')],
     separator: '_',
-    corePlugins: {},
-    theme: {},
-    plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     let expectedPath = path.resolve(__dirname, './custom-separator.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
@@ -34,14 +23,9 @@ test('dash is not supported', () => {
     darkMode: 'class',
     content: [{ raw: 'lg-hover-font-bold' }],
     separator: '-',
-    corePlugins: {},
-    theme: {},
-    plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return expect(run(css, config)).rejects.toThrowError(
+  return expect(run('@tailwind utilities', config)).rejects.toThrowError(
     "The '-' character cannot be used as a custom separator in JIT mode due to parsing ambiguity. Please use another character like '_' instead."
   )
 })
diff --git a/tests/custom-transformers.test.js b/tests/custom-transformers.test.js
new file mode 100644
index 000000000..9402dd300
--- /dev/null
+++ b/tests/custom-transformers.test.js
@@ -0,0 +1,66 @@
+import { run, html, css } from './util/run'
+
+function customTransformer(content) {
+  return content.replace(/uppercase/g, 'lowercase')
+}
+
+test('transform function', () => {
+  let config = {
+    content: {
+      content: [{ raw: html`<div class="uppercase"></div>` }],
+      transform: customTransformer,
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .lowercase {
+        text-transform: lowercase;
+      }
+    `)
+  })
+})
+
+test('transform.DEFAULT', () => {
+  let config = {
+    content: {
+      content: [{ raw: html`<div class="uppercase"></div>` }],
+      transform: {
+        DEFAULT: customTransformer,
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .lowercase {
+        text-transform: lowercase;
+      }
+    `)
+  })
+})
+
+test('transform.{extension}', () => {
+  let config = {
+    content: {
+      content: [
+        { raw: html`<div class="uppercase"></div>`, extension: 'html' },
+        { raw: html`<div class="uppercase"></div>`, extension: 'php' },
+      ],
+      transform: {
+        html: customTransformer,
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .uppercase {
+        text-transform: uppercase;
+      }
+      .lowercase {
+        text-transform: lowercase;
+      }
+    `)
+  })
+})
diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js
index 07031d553..23713a552 100644
--- a/tests/customConfig.test.js
+++ b/tests/customConfig.test.js
@@ -1,40 +1,14 @@
 import fs from 'fs'
 import path from 'path'
-import postcss from 'postcss'
-import tailwind from '../src/index'
 import { cjsConfigFile, defaultConfigFile } from '../src/constants'
 import inTempDirectory from '../jest/runInTempDirectory'
 
-// NOTE: If we ever want to abstract this logic, then we have to watch out
-// because in most tests we default to an empty object here. However, in this
-// tests we do want to check the difference between no config (undefined) and a
-// config (empty object or full object).
-function run(input, config /* Undefined is important in this case */) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
-
-function html(templates) {
-  return templates.join('')
-}
-
-function javascript(templates) {
-  return templates.join('')
-}
+import { run, html, css, javascript } from './util/run'
 
 test('it uses the values from the custom config file', () => {
   let config = require(path.resolve(`${__dirname}/fixtures/custom-config.js`))
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 400px) {
         .mobile\\:font-bold {
@@ -55,11 +29,7 @@ test('custom config can be passed as an object', () => {
     },
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 400px) {
         .mobile\\:font-bold {
@@ -75,11 +45,7 @@ test('custom config path can be passed using `config` property in an object', ()
     config: path.resolve(`${__dirname}/fixtures/custom-config.js`),
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 400px) {
         .mobile\\:font-bold {
@@ -102,11 +68,7 @@ test('custom config can be passed under the `config` property', () => {
     },
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 400px) {
         .mobile\\:font-bold {
@@ -131,11 +93,7 @@ test('tailwind.config.cjs is picked up by default', () => {
       }`
     )
 
-    let content = css`
-      @tailwind utilities;
-    `
-
-    return run(content).then((result) => {
+    return run('@tailwind utilities').then((result) => {
       expect(result.css).toMatchFormattedCss(css`
         @media (min-width: 400px) {
           .mobile\\:font-bold {
@@ -161,11 +119,7 @@ test('tailwind.config.js is picked up by default', () => {
       }`
     )
 
-    let content = css`
-      @tailwind utilities;
-    `
-
-    return run(content).then((result) => {
+    return run('@tailwind utilities').then((result) => {
       expect(result.css).toMatchFormattedCss(css`
         @media (min-width: 400px) {
           .mobile\\:font-bold {
@@ -191,11 +145,7 @@ test('tailwind.config.cjs is picked up by default when passing an empty object',
       }`
     )
 
-    let content = css`
-      @tailwind utilities;
-    `
-
-    return run(content, {}).then((result) => {
+    return run('@tailwind utilities', {}).then((result) => {
       expect(result.css).toMatchFormattedCss(css`
         @media (min-width: 400px) {
           .mobile\\:font-bold {
@@ -221,11 +171,7 @@ test('tailwind.config.js is picked up by default when passing an empty object',
       }`
     )
 
-    let content = css`
-      @tailwind utilities;
-    `
-
-    return run(content, {}).then((result) => {
+    return run('@tailwind utilities', {}).then((result) => {
       expect(result.css).toMatchFormattedCss(css`
         @media (min-width: 400px) {
           .mobile\\:font-bold {
@@ -252,11 +198,7 @@ test('the default config can be overridden using the presets key', () => {
     },
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .min-h-0 {
         min-height: 0px;
@@ -286,11 +228,7 @@ test('presets can be functions', () => {
     },
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .min-h-0 {
         min-height: 0px;
@@ -321,11 +259,7 @@ test('the default config can be removed by using an empty presets key in a prese
     },
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .min-h-primary {
         min-height: 48px;
@@ -376,11 +310,7 @@ test('presets can have their own presets', () => {
     },
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-transparent {
         background-color: transparent;
@@ -437,11 +367,7 @@ test('function presets can be mixed with object presets', () => {
     },
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .bg-transparent {
         background-color: transparent;
diff --git a/tests/jit/dark-mode.test.js b/tests/dark-mode.test.js
similarity index 82%
rename from tests/jit/dark-mode.test.js
rename to tests/dark-mode.test.js
index 9bbd003f3..1aab1c85c 100644
--- a/tests/jit/dark-mode.test.js
+++ b/tests/dark-mode.test.js
@@ -1,28 +1,10 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
-
-function html(templates) {
-  return templates.join('')
-}
+import { run, html, css } from './util/run'
 
 it('should be possible to use the darkMode "class" mode', () => {
   let config = {
     darkMode: 'class',
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
   let input = css`
@@ -45,8 +27,6 @@ it('should be possible to use the darkMode "media" mode', () => {
     darkMode: 'media',
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
   let input = css`
@@ -70,8 +50,6 @@ it('should default to the `media` mode when no mode is provided', () => {
   let config = {
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
   let input = css`
@@ -96,8 +74,6 @@ it('should default to the `media` mode when mode is set to `false`', () => {
     darkMode: false,
     content: [{ raw: html`<div class="dark:font-bold"></div>` }],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
   let input = css`
diff --git a/tests/extractor-edge-cases.test.js b/tests/extractor-edge-cases.test.js
new file mode 100644
index 000000000..01f780166
--- /dev/null
+++ b/tests/extractor-edge-cases.test.js
@@ -0,0 +1,29 @@
+import { run, html, css } from './util/run'
+
+test('PHP arrays', async () => {
+  let config = {
+    content: [
+      { raw: html`<h1 class="<?php echo wrap(['class' => "max-w-[16rem]"]); ?>">Hello world</h1>` },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .max-w-\\[16rem\\] {
+        max-width: 16rem;
+      }
+    `)
+  })
+})
+
+test('arbitrary values with quotes', async () => {
+  let config = { content: [{ raw: html`<div class="content-['hello]']"></div>` }] }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .content-\\[\\'hello\\]\\'\\] {
+        content: 'hello]';
+      }
+    `)
+  })
+})
diff --git a/tests/jit/import-syntax.test.css b/tests/import-syntax.test.css
similarity index 100%
rename from tests/jit/import-syntax.test.css
rename to tests/import-syntax.test.css
diff --git a/tests/jit/import-syntax.test.html b/tests/import-syntax.test.html
similarity index 100%
rename from tests/jit/import-syntax.test.html
rename to tests/import-syntax.test.html
diff --git a/tests/jit/import-syntax.test.js b/tests/import-syntax.test.js
similarity index 60%
rename from tests/jit/import-syntax.test.js
rename to tests/import-syntax.test.js
index 04f375c8a..79aa8e2ed 100644
--- a/tests/jit/import-syntax.test.js
+++ b/tests/import-syntax.test.js
@@ -1,19 +1,12 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('using @import instead of @tailwind', () => {
   let config = {
     content: [path.resolve(__dirname, './import-syntax.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
     plugins: [
       function ({ addBase }) {
         addBase({
@@ -25,13 +18,13 @@ test('using @import instead of @tailwind', () => {
     ],
   }
 
-  let css = `
-    @import "tailwindcss/base";
-    @import "tailwindcss/components";
-    @import "tailwindcss/utilities";
+  let input = css`
+    @import 'tailwindcss/base';
+    @import 'tailwindcss/components';
+    @import 'tailwindcss/utilities';
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './import-syntax.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/important-boolean.test.css b/tests/important-boolean.test.css
similarity index 100%
rename from tests/jit/important-boolean.test.css
rename to tests/important-boolean.test.css
diff --git a/tests/jit/important-boolean.test.html b/tests/important-boolean.test.html
similarity index 100%
rename from tests/jit/important-boolean.test.html
rename to tests/important-boolean.test.html
diff --git a/tests/jit/important-boolean.test.js b/tests/important-boolean.test.js
similarity index 83%
rename from tests/jit/important-boolean.test.js
rename to tests/important-boolean.test.js
index e236bf575..20fc4d1ee 100644
--- a/tests/jit/important-boolean.test.js
+++ b/tests/important-boolean.test.js
@@ -1,13 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('important boolean', () => {
   let config = {
@@ -15,7 +9,6 @@ test('important boolean', () => {
     darkMode: 'class',
     content: [path.resolve(__dirname, './important-boolean.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
     plugins: [
       function ({ addComponents, addUtilities }) {
         addComponents(
@@ -49,7 +42,7 @@ test('important boolean', () => {
     ],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     @tailwind components;
     @layer components {
@@ -63,7 +56,7 @@ test('important boolean', () => {
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './important-boolean.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/important-modifier-prefix.test.css b/tests/important-modifier-prefix.test.css
similarity index 100%
rename from tests/jit/important-modifier-prefix.test.css
rename to tests/important-modifier-prefix.test.css
diff --git a/tests/jit/important-modifier-prefix.test.html b/tests/important-modifier-prefix.test.html
similarity index 100%
rename from tests/jit/important-modifier-prefix.test.html
rename to tests/important-modifier-prefix.test.html
diff --git a/tests/jit/important-modifier-prefix.test.js b/tests/important-modifier-prefix.test.js
similarity index 67%
rename from tests/jit/important-modifier-prefix.test.js
rename to tests/important-modifier-prefix.test.js
index 54c0ae55c..243aa2012 100644
--- a/tests/jit/important-modifier-prefix.test.js
+++ b/tests/important-modifier-prefix.test.js
@@ -1,13 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('important modifier with prefix', () => {
   let config = {
@@ -16,17 +10,15 @@ test('important modifier with prefix', () => {
     darkMode: 'class',
     content: [path.resolve(__dirname, './important-modifier-prefix.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
-    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, './important-modifier-prefix.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/important-modifier.test.css b/tests/important-modifier.test.css
similarity index 100%
rename from tests/jit/important-modifier.test.css
rename to tests/important-modifier.test.css
diff --git a/tests/jit/important-modifier.test.html b/tests/important-modifier.test.html
similarity index 100%
rename from tests/jit/important-modifier.test.html
rename to tests/important-modifier.test.html
diff --git a/tests/jit/important-modifier.test.js b/tests/important-modifier.test.js
similarity index 65%
rename from tests/jit/important-modifier.test.js
rename to tests/important-modifier.test.js
index 024a50e1f..c68c8dcd5 100644
--- a/tests/jit/important-modifier.test.js
+++ b/tests/important-modifier.test.js
@@ -1,13 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('important modifier', () => {
   let config = {
@@ -15,17 +9,15 @@ test('important modifier', () => {
     darkMode: 'class',
     content: [path.resolve(__dirname, './important-modifier.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
-    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, './important-modifier.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/important-selector.test.css b/tests/important-selector.test.css
similarity index 100%
rename from tests/jit/important-selector.test.css
rename to tests/important-selector.test.css
diff --git a/tests/jit/important-selector.test.html b/tests/important-selector.test.html
similarity index 100%
rename from tests/jit/important-selector.test.html
rename to tests/important-selector.test.html
diff --git a/tests/jit/important-selector.test.js b/tests/important-selector.test.js
similarity index 83%
rename from tests/jit/important-selector.test.js
rename to tests/important-selector.test.js
index 2a92a27b2..1da8064d8 100644
--- a/tests/jit/important-selector.test.js
+++ b/tests/important-selector.test.js
@@ -1,13 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('important selector', () => {
   let config = {
@@ -15,7 +9,6 @@ test('important selector', () => {
     darkMode: 'class',
     content: [path.resolve(__dirname, './important-selector.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
     plugins: [
       function ({ addComponents, addUtilities }) {
         addComponents(
@@ -49,7 +42,7 @@ test('important selector', () => {
     ],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     @tailwind components;
     @layer components {
@@ -63,7 +56,7 @@ test('important selector', () => {
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './important-selector.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/apply.test.js b/tests/jit/apply.test.js
deleted file mode 100644
index 3dba79d3f..000000000
--- a/tests/jit/apply.test.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import postcss from 'postcss'
-import fs from 'fs'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  const { currentTestName } = expect.getState()
-
-  return postcss(tailwind(config)).process(input, {
-    from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
-
-test('@apply', () => {
-  let config = {
-    darkMode: 'class',
-    content: [path.resolve(__dirname, './apply.test.html')],
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
-  }
-
-  let css = `
-  @tailwind components;
-  @tailwind utilities;
-
-  @layer components {
-    .basic-example {
-      @apply px-4 py-2 bg-blue-500 rounded-md;
-    }
-    .class-order {
-      @apply pt-4 pr-1 px-3 py-7 p-8;
-    }
-    .with-additional-properties {
-      font-weight: 500;
-      @apply text-right;
-    }
-    .variants {
-      @apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium font-semibold;
-    }
-    .only-variants {
-      @apply xl:focus:font-black hover:font-bold lg:font-light focus:font-medium;
-    }
-    .apply-group-variant {
-      @apply group-hover:text-center lg:group-hover:text-left;
-    }
-    .apply-dark-variant {
-      @apply dark:text-center dark:hover:text-right lg:dark:text-left;
-    }
-    .apply-custom-utility {
-      @apply custom-util hover:custom-util lg:custom-util xl:focus:custom-util;
-    }
-    .multiple, .selectors {
-      @apply px-4 py-2 bg-blue-500 rounded-md;
-    }
-    .multiple-variants, .selectors-variants {
-      @apply hover:text-center active:text-right lg:focus:text-left;
-    }
-    .multiple-group, .selectors-group {
-      @apply group-hover:text-center lg:group-hover:text-left;
-    }
-    /* TODO: This works but the generated CSS is unnecessarily verbose. */
-    .complex-utilities {
-      @apply ordinal tabular-nums focus:diagonal-fractions shadow-lg hover:shadow-xl;
-    }
-    .basic-nesting-parent {
-      .basic-nesting-child {
-        @apply font-bold hover:font-normal;
-      }
-    }
-    .use-base-only-a {
-      @apply font-bold;
-    }
-    .use-base-only-b {
-      @apply use-base-only-a font-normal;
-    }
-    .use-dependant-only-a {
-      @apply font-bold;
-    }
-    .use-dependant-only-b {
-      @apply use-dependant-only-a font-normal;
-    }
-    .btn {
-      @apply font-bold py-2 px-4 rounded;
-    }
-    .btn-blue {
-      @apply btn bg-blue-500 hover:bg-blue-700 text-white;
-    }
-    .recursive-apply-a {
-      @apply font-black sm:font-thin;
-    }
-    .recursive-apply-b {
-      @apply recursive-apply-a font-semibold md:font-extralight;
-    }
-    .recursive-apply-c {
-      @apply recursive-apply-b font-bold lg:font-light;
-    }
-    .use-with-other-properties-base {
-      color: green;
-      @apply font-bold;
-    }
-    .use-with-other-properties-component {
-      @apply use-with-other-properties-base;
-    }
-    .add-sibling-properties {
-      padding: 2rem;
-      @apply px-4 hover:px-2 lg:px-10 xl:focus:px-1;
-      padding-top: 3px;
-      @apply use-with-other-properties-base;
-    }
-
-    h1 {
-      @apply text-2xl lg:text-2xl sm:text-3xl;
-    }
-    h2 {
-      @apply text-2xl;
-      @apply lg:text-2xl;
-      @apply sm:text-2xl;
-    }
-
-    .important-modifier {
-      @apply px-4 !rounded-md;
-    }
-
-    .important-modifier-variant {
-      @apply px-4 hover:!rounded-md;
-    }
-  }
-
-  @layer utilities {
-    .custom-util {
-      custom: stuff;
-    }
-
-    .foo {
-      @apply animate-spin;
-    }
-
-    .bar {
-      @apply animate-pulse !important;
-    }
-  }
-`
-
-  return run(css, config).then((result) => {
-    let expectedPath = path.resolve(__dirname, './apply.test.css')
-    let expected = fs.readFileSync(expectedPath, 'utf8')
-
-    expect(result.css).toMatchFormattedCss(expected)
-  })
-})
-
-test('@apply error with unknown utility', async () => {
-  let config = {
-    darkMode: 'class',
-    content: [path.resolve(__dirname, './apply.test.html')],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let css = `
-  @tailwind components;
-  @tailwind utilities;
-
-  @layer components {
-    .foo {
-      @apply a-utility-that-does-not-exist;
-    }
-  }
-`
-
-  await expect(run(css, config)).rejects.toThrowError('class does not exist')
-})
-
-test('@apply error with nested @screen', async () => {
-  let config = {
-    darkMode: 'class',
-    content: [path.resolve(__dirname, './apply.test.html')],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let css = `
-  @tailwind components;
-  @tailwind utilities;
-
-  @layer components {
-    .foo {
-      @screen md {
-        @apply text-black;
-      }
-    }
-  }
-`
-
-  await expect(run(css, config)).rejects.toThrowError(
-    '@apply is not supported within nested at-rules like @screen'
-  )
-})
-
-test('@apply error with nested @anyatrulehere', async () => {
-  let config = {
-    darkMode: 'class',
-    content: [path.resolve(__dirname, './apply.test.html')],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let css = `
-    @tailwind components;
-    @tailwind utilities;
-
-    @layer components {
-      .foo {
-        @genie {
-          @apply text-black;
-        }
-      }
-    }
-  `
-
-  await expect(run(css, config)).rejects.toThrowError(
-    '@apply is not supported within nested at-rules like @genie'
-  )
-})
-
-test('@apply error when using .group utility', async () => {
-  let config = {
-    darkMode: 'class',
-    content: [{ raw: '<div class="foo"></div>' }],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind components;
-    @tailwind utilities;
-
-    @layer components {
-      .foo {
-        @apply group;
-      }
-    }
-  `
-
-  await expect(run(input, config)).rejects.toThrowError(
-    `@apply should not be used with the 'group' utility`
-  )
-})
-
-test('@apply error when using a prefixed .group utility', async () => {
-  let config = {
-    prefix: 'tw-',
-    darkMode: 'class',
-    content: [{ raw: '<div class="foo"></div>' }],
-    corePlugins: { preflight: false },
-    plugins: [],
-  }
-
-  let css = `
-    @tailwind components;
-    @tailwind utilities;
-
-    @layer components {
-      .foo {
-        @apply tw-group;
-      }
-    }
-  `
-
-  await expect(run(css, config)).rejects.toThrowError(
-    `@apply should not be used with the 'tw-group' utility`
-  )
-})
diff --git a/tests/jit/collapse-adjacent-rules.test.js b/tests/jit/collapse-adjacent-rules.test.js
deleted file mode 100644
index 4608dca63..000000000
--- a/tests/jit/collapse-adjacent-rules.test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import postcss from 'postcss'
-import fs from 'fs'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-test('collapse adjacent rules', () => {
-  let config = {
-    content: [path.resolve(__dirname, './collapse-adjacent-rules.test.html')],
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
-  }
-
-  let css = `
-    @tailwind base;
-    @font-face {
-      font-family: "Inter";
-      src: url("/fonts/Inter.woff2") format("woff2"),
-            url("/fonts/Inter.woff") format("woff");
-    }
-    @font-face {
-      font-family: "Gilroy";
-      src: url("/fonts/Gilroy.woff2") format("woff2"),
-            url("/fonts/Gilroy.woff") format("woff");
-    }
-    @page {
-      margin: 1cm;
-    }
-    @tailwind components;
-    @tailwind utilities;
-    @layer base {
-      @font-face {
-        font-family: "Poppins";
-        src: url("/fonts/Poppins.woff2") format("woff2"),
-              url("/fonts/Poppins.woff") format("woff");
-      }
-      @font-face {
-        font-family: "Proxima Nova";
-        src: url("/fonts/ProximaNova.woff2") format("woff2"),
-              url("/fonts/ProximaNova.woff") format("woff");
-      }
-    }
-    .foo, .bar {
-      color: black;
-    }
-    .foo,
-    .bar {
-      font-weight: 700;
-    }
-  `
-
-  return run(css, config).then((result) => {
-    let expectedPath = path.resolve(__dirname, './collapse-adjacent-rules.test.css')
-    let expected = fs.readFileSync(expectedPath, 'utf8')
-
-    expect(result.css).toMatchFormattedCss(expected)
-  })
-})
diff --git a/tests/jit/custom-transformers.test.js b/tests/jit/custom-transformers.test.js
deleted file mode 100644
index d006e4750..000000000
--- a/tests/jit/custom-transformers.test.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import postcss from 'postcss'
-import path from 'path'
-
-function run(input, config = {}) {
-  jest.resetModules()
-  const tailwind = require('../../src')
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function customTransformer(content) {
-  return content.replace(/uppercase/g, 'lowercase')
-}
-
-const css = `
-  @tailwind utilities;
-`
-
-test('transform function', () => {
-  let config = {
-    content: {
-      content: [{ raw: '<div class="uppercase"></div>' }],
-      transform: customTransformer,
-    },
-    theme: {},
-    plugins: [],
-  }
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .lowercase {
-        text-transform: lowercase;
-      }
-    `)
-  })
-})
-
-test('transform.DEFAULT', () => {
-  let config = {
-    content: {
-      content: [{ raw: '<div class="uppercase"></div>' }],
-      transform: {
-        DEFAULT: customTransformer,
-      },
-    },
-    theme: {},
-    plugins: [],
-  }
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .lowercase {
-        text-transform: lowercase;
-      }
-    `)
-  })
-})
-
-test('transform.{extension}', () => {
-  let config = {
-    content: {
-      content: [
-        { raw: '<div class="uppercase"></div>', extension: 'html' },
-        { raw: '<div class="uppercase"></div>', extension: 'php' },
-      ],
-      transform: {
-        html: customTransformer,
-      },
-    },
-    theme: {},
-    plugins: [],
-  }
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .uppercase {
-        text-transform: uppercase;
-      }
-      .lowercase {
-        text-transform: lowercase;
-      }
-    `)
-  })
-})
diff --git a/tests/jit/extractor-edge-cases.test.js b/tests/jit/extractor-edge-cases.test.js
deleted file mode 100644
index ac1819802..000000000
--- a/tests/jit/extractor-edge-cases.test.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  const { currentTestName } = expect.getState()
-
-  return postcss(tailwind(config)).process(input, {
-    from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  })
-}
-
-test('PHP arrays', async () => {
-  let config = {
-    content: [
-      {
-        raw: `<h1 class="<?php echo wrap(['class' => "max-w-[16rem]"]); ?>">Hello world</h1>`,
-      },
-    ],
-    theme: {},
-    plugins: [],
-  }
-
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .max-w-\\[16rem\\] {
-        max-width: 16rem;
-      }
-    `)
-  })
-})
-
-test('arbitrary values with quotes', async () => {
-  let config = {
-    content: [
-      {
-        raw: `<div class="content-['hello]']"></div>`,
-      },
-    ],
-    theme: {},
-    plugins: [],
-  }
-
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .content-\\[\\'hello\\]\\'\\] {
-        content: 'hello]';
-      }
-    `)
-  })
-})
diff --git a/tests/jit/relative-purge-paths.test.js b/tests/jit/relative-purge-paths.test.js
deleted file mode 100644
index 5bc32547b..000000000
--- a/tests/jit/relative-purge-paths.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
-
-test('relative purge paths', () => {
-  let config = {
-    content: ['./tests/jit/relative-purge-paths.test.html'],
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind base;
-    @tailwind components;
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    expect(result.css).toIncludeCss(css`
-      .font-bold {
-        font-weight: 700;
-      }
-    `)
-  })
-})
diff --git a/tests/jit/kitchen-sink.test.css b/tests/kitchen-sink.test.css
similarity index 100%
rename from tests/jit/kitchen-sink.test.css
rename to tests/kitchen-sink.test.css
diff --git a/tests/jit/kitchen-sink.test.html b/tests/kitchen-sink.test.html
similarity index 100%
rename from tests/jit/kitchen-sink.test.html
rename to tests/kitchen-sink.test.html
diff --git a/tests/jit/kitchen-sink.test.js b/tests/kitchen-sink.test.js
similarity index 93%
rename from tests/jit/kitchen-sink.test.js
rename to tests/kitchen-sink.test.js
index f9c26d83c..1c4d5ec05 100644
--- a/tests/jit/kitchen-sink.test.js
+++ b/tests/kitchen-sink.test.js
@@ -1,17 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
+import { run, css } from './util/run'
 
 test('it works', () => {
   let config = {
diff --git a/tests/jit/layer-at-rules.test.js b/tests/layer-at-rules.test.js
similarity index 74%
rename from tests/jit/layer-at-rules.test.js
rename to tests/layer-at-rules.test.js
index 61216fe6f..ac89d1784 100644
--- a/tests/jit/layer-at-rules.test.js
+++ b/tests/layer-at-rules.test.js
@@ -1,20 +1,4 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
-
-function html(templates) {
-  return templates.join('')
-}
+import { run, html, css } from './util/run'
 
 test('custom user-land utilities', () => {
   let config = {
diff --git a/tests/jit/layer-without-tailwind.test.css b/tests/layer-without-tailwind.test.css
similarity index 100%
rename from tests/jit/layer-without-tailwind.test.css
rename to tests/layer-without-tailwind.test.css
diff --git a/tests/jit/layer-without-tailwind.test.html b/tests/layer-without-tailwind.test.html
similarity index 100%
rename from tests/jit/layer-without-tailwind.test.html
rename to tests/layer-without-tailwind.test.html
diff --git a/tests/jit/layer-without-tailwind.test.js b/tests/layer-without-tailwind.test.js
similarity index 64%
rename from tests/jit/layer-without-tailwind.test.js
rename to tests/layer-without-tailwind.test.js
index 6ac5e1e09..80aeb68b2 100644
--- a/tests/jit/layer-without-tailwind.test.js
+++ b/tests/layer-without-tailwind.test.js
@@ -1,23 +1,13 @@
-import postcss from 'postcss'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  const { currentTestName } = expect.getState()
-
-  return postcss(tailwind(config)).process(input, {
-    from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  })
-}
+import { run, css } from './util/run'
 
 test('using @layer without @tailwind', async () => {
   let config = {
     content: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
-    theme: {},
-    plugins: [],
   }
 
-  let css = `
+  let input = css`
     @layer components {
       .foo {
         color: black;
@@ -25,7 +15,7 @@ test('using @layer without @tailwind', async () => {
     }
   `
 
-  await expect(run(css, config)).rejects.toThrowError(
+  await expect(run(input, config)).rejects.toThrowError(
     '`@layer components` is used but no matching `@tailwind components` directive is present.'
   )
 })
@@ -33,11 +23,9 @@ test('using @layer without @tailwind', async () => {
 test('using @responsive without @tailwind', async () => {
   let config = {
     content: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
-    theme: {},
-    plugins: [],
   }
 
-  let css = `
+  let input = css`
     @responsive {
       .foo {
         color: black;
@@ -45,7 +33,7 @@ test('using @responsive without @tailwind', async () => {
     }
   `
 
-  await expect(run(css, config)).rejects.toThrowError(
+  await expect(run(input, config)).rejects.toThrowError(
     '`@responsive` is used but `@tailwind utilities` is missing.'
   )
 })
@@ -53,11 +41,9 @@ test('using @responsive without @tailwind', async () => {
 test('using @variants without @tailwind', async () => {
   let config = {
     content: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
-    theme: {},
-    plugins: [],
   }
 
-  let css = `
+  let input = css`
     @variants hover {
       .foo {
         color: black;
@@ -65,7 +51,7 @@ test('using @variants without @tailwind', async () => {
     }
   `
 
-  await expect(run(css, config)).rejects.toThrowError(
+  await expect(run(input, config)).rejects.toThrowError(
     '`@variants` is used but `@tailwind utilities` is missing.'
   )
 })
@@ -73,11 +59,9 @@ test('using @variants without @tailwind', async () => {
 test('non-Tailwind @layer rules are okay', async () => {
   let config = {
     content: [path.resolve(__dirname, './layer-without-tailwind.test.html')],
-    theme: {},
-    plugins: [],
   }
 
-  let css = `
+  let input = css`
     @layer custom {
       .foo {
         color: black;
@@ -85,8 +69,8 @@ test('non-Tailwind @layer rules are okay', async () => {
     }
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       @layer custom {
         .foo {
           color: black;
diff --git a/tests/jit/modify-selectors.test.css b/tests/modify-selectors.test.css
similarity index 100%
rename from tests/jit/modify-selectors.test.css
rename to tests/modify-selectors.test.css
diff --git a/tests/jit/modify-selectors.test.html b/tests/modify-selectors.test.html
similarity index 100%
rename from tests/jit/modify-selectors.test.html
rename to tests/modify-selectors.test.html
diff --git a/tests/jit/modify-selectors.test.js b/tests/modify-selectors.test.js
similarity index 82%
rename from tests/jit/modify-selectors.test.js
rename to tests/modify-selectors.test.js
index c562495d7..a586415ef 100644
--- a/tests/jit/modify-selectors.test.js
+++ b/tests/modify-selectors.test.js
@@ -1,14 +1,8 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 import selectorParser from 'postcss-selector-parser'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('modify selectors', () => {
   let config = {
@@ -32,7 +26,7 @@ test('modify selectors', () => {
     ],
   }
 
-  let css = `
+  let input = css`
     @tailwind components;
     @tailwind utilities;
 
@@ -43,7 +37,7 @@ test('modify selectors', () => {
     }
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './modify-selectors.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/mutable.test.css b/tests/mutable.test.css
similarity index 100%
rename from tests/jit/mutable.test.css
rename to tests/mutable.test.css
diff --git a/tests/jit/mutable.test.html b/tests/mutable.test.html
similarity index 100%
rename from tests/jit/mutable.test.html
rename to tests/mutable.test.html
diff --git a/tests/jit/mutable.test.js b/tests/mutable.test.js
similarity index 81%
rename from tests/jit/mutable.test.js
rename to tests/mutable.test.js
index 1ced6f27e..931a7d37d 100644
--- a/tests/jit/mutable.test.js
+++ b/tests/mutable.test.js
@@ -1,7 +1,8 @@
 import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
+
+import { run } from './util/run'
 
 function pluginThatMutatesRules() {
   return (root) => {
@@ -17,12 +18,6 @@ function pluginThatMutatesRules() {
   }
 }
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
 test.only('plugins mutating rules after tailwind doesnt break it', async () => {
   let config = {
     content: [path.resolve(__dirname, './mutable.test.html')],
@@ -34,8 +29,6 @@ test.only('plugins mutating rules after tailwind doesnt break it', async () => {
     plugins: [],
   }
 
-  let css = `@tailwind utilities;`
-
   function checkResult(result) {
     let expectedPath = path.resolve(__dirname, './mutable.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
@@ -44,7 +37,7 @@ test.only('plugins mutating rules after tailwind doesnt break it', async () => {
   }
 
   // Verify the first run produces the expected result
-  let firstRun = await run(css, config)
+  let firstRun = await run('@tailwind utilities', config)
   checkResult(firstRun)
 
   // Outside of the context of tailwind jit more postcss plugins may operate on the AST:
@@ -54,6 +47,6 @@ test.only('plugins mutating rules after tailwind doesnt break it', async () => {
   })
 
   // Verify subsequent runs don't produce mutated rules
-  let secondRun = await run(css, config)
+  let secondRun = await run('@tailwind utilities', config)
   checkResult(secondRun)
 })
diff --git a/tests/jit/opacity.test.css b/tests/opacity.test.css
similarity index 100%
rename from tests/jit/opacity.test.css
rename to tests/opacity.test.css
diff --git a/tests/jit/opacity.test.html b/tests/opacity.test.html
similarity index 100%
rename from tests/jit/opacity.test.html
rename to tests/opacity.test.html
diff --git a/tests/jit/opacity.test.js b/tests/opacity.test.js
similarity index 63%
rename from tests/jit/opacity.test.js
rename to tests/opacity.test.js
index 54b27c16f..9fde486bb 100644
--- a/tests/jit/opacity.test.js
+++ b/tests/opacity.test.js
@@ -1,11 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
-}
+import { run } from './util/run'
 
 test('opacity', () => {
   let config = {
@@ -18,15 +14,9 @@ test('opacity', () => {
       placeholderOpacity: false,
       textOpacity: false,
     },
-    theme: {},
-    plugins: [],
   }
 
-  let css = `
-    @tailwind utilities;
-  `
-
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     let expectedPath = path.resolve(__dirname, './opacity.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/parallel-variants.test.js b/tests/parallel-variants.test.js
similarity index 66%
rename from tests/jit/parallel-variants.test.js
rename to tests/parallel-variants.test.js
index 7b291cda0..2f8004633 100644
--- a/tests/jit/parallel-variants.test.js
+++ b/tests/parallel-variants.test.js
@@ -1,24 +1,16 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-import { transformAllSelectors, updateAllClasses } from '../../src/util/pluginUtils.js'
+import { transformAllSelectors, updateAllClasses } from '../src/util/pluginUtils.js'
 
-function run(input, config = {}) {
-  const { currentTestName } = expect.getState()
-
-  return postcss(tailwind(config)).process(input, {
-    from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  })
-}
+import { run, html, css } from './util/run'
 
 test('basic parallel variants', async () => {
   let config = {
     content: [
       {
-        raw: '<div class="font-normal hover:test:font-black test:font-bold test:font-medium"></div>',
+        raw: html`<div
+          class="font-normal hover:test:font-black test:font-bold test:font-medium"
+        ></div>`,
       },
     ],
-    theme: {},
     plugins: [
       function test({ addVariant, config }) {
         addVariant('test', [
@@ -39,10 +31,8 @@ test('basic parallel variants', async () => {
     ],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .font-normal {
         font-weight: 400;
       }
diff --git a/tests/plugins/animation.test.js b/tests/plugins/animation.test.js
deleted file mode 100644
index 565234852..000000000
--- a/tests/plugins/animation.test.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import postcss from 'postcss'
-import processPlugins from '../../src/util/processPlugins'
-import plugin from '../../src/plugins/animation'
-
-function css(nodes) {
-  return postcss.root({ nodes }).toString()
-}
-
-test('defining animation and keyframes', () => {
-  const config = {
-    theme: {
-      animation: {
-        none: 'none',
-        spin: 'spin 1s linear infinite',
-        ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-        blink: 'blink 1s step-end infinite',
-      },
-      keyframes: {
-        spin: { to: { transform: 'rotate(360deg)' } },
-        ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },
-        blink: { '50%': { transform: 'scale(2)' } },
-      },
-    },
-    variants: {
-      animation: [],
-    },
-  }
-
-  const { utilities } = processPlugins([plugin()], config)
-
-  expect(css(utilities)).toMatchCss(`
-    @layer utilities {
-      @variants {
-        @keyframes spin {
-          to { transform: rotate(360deg); }
-        }
-      }
-    }
-
-    @layer utilities {
-      @variants {
-        @keyframes ping {
-          75%, 100% { transform: scale(2); opacity: 0; }
-        }
-      }
-    }
-
-    @layer utilities {
-      @variants {
-        @keyframes blink {
-          50% { transform: scale(2); }
-        }
-      }
-    }
-
-    @layer utilities {
-      @variants {
-        .animate-none { animation: none; }
-        .animate-spin { animation: spin 1s linear infinite; }
-        .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
-        .animate-blink { animation: blink 1s step-end infinite; }
-      }
-    }
-  `)
-})
-
-test('defining animation and keyframes with prefix', () => {
-  const config = {
-    prefix: 'tw-',
-    theme: {
-      animation: {
-        none: 'none',
-        spin: 'spin 1s linear infinite',
-        ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-      },
-      keyframes: {
-        spin: { to: { transform: 'rotate(360deg)' } },
-        ping: { '75%, 100%': { transform: 'scale(2)', opacity: '0' } },
-      },
-    },
-    variants: {
-      animation: [],
-    },
-  }
-
-  const { utilities } = processPlugins([plugin()], config)
-
-  expect(css(utilities)).toMatchCss(`
-    @layer utilities {
-      @variants {
-        @keyframes tw-spin {
-          to { transform: rotate(360deg); }
-        }
-      }
-    }
-
-    @layer utilities {
-      @variants {
-        @keyframes tw-ping {
-          75%, 100% { transform: scale(2); opacity: 0; }
-        }
-      }
-    }
-
-    @layer utilities {
-      @variants {
-        .tw-animate-none { animation: none; }
-        .tw-animate-spin { animation: tw-spin 1s linear infinite; }
-        .tw-animate-ping { animation: tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
-      }
-    }
-  `)
-})
-
-test('defining animation and keyframes with prefix (skip undefined animations)', () => {
-  const config = {
-    prefix: 'tw-',
-    theme: {
-      animation: {
-        none: 'none',
-        spin: 'spin 1s linear infinite',
-        ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-      },
-      keyframes: {
-        spin: { to: { transform: 'rotate(360deg)' } },
-      },
-    },
-    variants: {
-      animation: [],
-    },
-  }
-
-  const { utilities } = processPlugins([plugin()], config)
-
-  expect(css(utilities)).toMatchCss(`
-    @layer utilities {
-      @variants {
-        @keyframes tw-spin {
-          to { transform: rotate(360deg); }
-        }
-      }
-    }
-
-    @layer utilities {
-      @variants {
-        .tw-animate-none { animation: none; }
-        .tw-animate-spin { animation: tw-spin 1s linear infinite; }
-        .tw-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
-      }
-    }
-  `)
-})
diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js
index 53f46c929..d772bd4e1 100644
--- a/tests/plugins/fontSize.test.js
+++ b/tests/plugins/fontSize.test.js
@@ -1,23 +1,7 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src/index.js'
-
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
-
-function html(templates) {
-  return templates.join('')
-}
+import { run, html, css } from '../util/run'
 
 test('font-size utilities can include a default line-height', () => {
-  const config = {
+  let config = {
     content: [{ raw: html`<div class="text-sm text-md text-lg"></div>` }],
     theme: {
       fontSize: {
@@ -26,10 +10,6 @@ test('font-size utilities can include a default line-height', () => {
         lg: ['20px', '28px'],
       },
     },
-    corePlugins: ['fontSize'],
-    variants: {
-      fontSize: [],
-    },
   }
 
   return run('@tailwind utilities', config).then((result) => {
@@ -50,7 +30,7 @@ test('font-size utilities can include a default line-height', () => {
 })
 
 test('font-size utilities can include a default letter-spacing', () => {
-  const config = {
+  let config = {
     content: [{ raw: html`<div class="text-sm text-md text-lg"></div>` }],
     theme: {
       fontSize: {
@@ -59,10 +39,6 @@ test('font-size utilities can include a default letter-spacing', () => {
         lg: ['20px', { letterSpacing: '-0.02em' }],
       },
     },
-    corePlugins: ['fontSize'],
-    variants: {
-      fontSize: [],
-    },
   }
 
   return run('@tailwind utilities', config).then((result) => {
@@ -83,7 +59,7 @@ test('font-size utilities can include a default letter-spacing', () => {
 })
 
 test('font-size utilities can include a default line-height and letter-spacing', () => {
-  const config = {
+  let config = {
     content: [{ raw: html`<div class="text-sm text-md text-lg"></div>` }],
     theme: {
       fontSize: {
@@ -92,10 +68,6 @@ test('font-size utilities can include a default line-height and letter-spacing',
         lg: ['20px', { lineHeight: '28px', letterSpacing: '-0.02em' }],
       },
     },
-    corePlugins: ['fontSize'],
-    variants: {
-      fontSize: [],
-    },
   }
 
   return run('@tailwind utilities', config).then((result) => {
diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js
index 46201cc0d..9047ff699 100644
--- a/tests/plugins/gradientColorStops.test.js
+++ b/tests/plugins/gradientColorStops.test.js
@@ -1,20 +1,4 @@
-import path from 'path'
-import postcss from 'postcss'
-import tailwind from '../../src/index'
-
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
-
-function html(templates) {
-  return templates.join('')
-}
+import { run, html, css } from '../util/run'
 
 test('opacity variables are given to colors defined as closures', () => {
   let config = {
@@ -44,14 +28,9 @@ test('opacity variables are given to colors defined as closures', () => {
         50: '0.5',
       },
     },
-    plugins: [],
   }
 
-  let content = css`
-    @tailwind utilities;
-  `
-
-  return run(content, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       .from-primary {
         --tw-gradient-from: rgb(31, 31, 31);
diff --git a/tests/jit/prefix.fn.test.css b/tests/prefix.fn.test.css
similarity index 100%
rename from tests/jit/prefix.fn.test.css
rename to tests/prefix.fn.test.css
diff --git a/tests/jit/prefix.fn.test.html b/tests/prefix.fn.test.html
similarity index 100%
rename from tests/jit/prefix.fn.test.html
rename to tests/prefix.fn.test.html
diff --git a/tests/jit/prefix.fn.test.js b/tests/prefix.fn.test.js
similarity index 64%
rename from tests/jit/prefix.fn.test.js
rename to tests/prefix.fn.test.js
index 8007bb9dd..419e4735e 100644
--- a/tests/jit/prefix.fn.test.js
+++ b/tests/prefix.fn.test.js
@@ -1,13 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run } from './util/run'
 
 test('prefix fn', () => {
   let config = {
@@ -20,14 +14,9 @@ test('prefix fn', () => {
     },
     content: [path.resolve(__dirname, './prefix.fn.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
   }
 
-  let css = `
-    @tailwind utilities;
-  `
-
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     let expectedPath = path.resolve(__dirname, './prefix.fn.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/prefix.test.css b/tests/prefix.test.css
similarity index 100%
rename from tests/jit/prefix.test.css
rename to tests/prefix.test.css
diff --git a/tests/jit/prefix.test.html b/tests/prefix.test.html
similarity index 100%
rename from tests/jit/prefix.test.html
rename to tests/prefix.test.html
diff --git a/tests/jit/prefix.test.js b/tests/prefix.test.js
similarity index 86%
rename from tests/jit/prefix.test.js
rename to tests/prefix.test.js
index bb656c472..20fb279ad 100644
--- a/tests/jit/prefix.test.js
+++ b/tests/prefix.test.js
@@ -1,13 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('prefix', () => {
   let config = {
@@ -56,7 +50,7 @@ test('prefix', () => {
     ],
   }
 
-  let css = `
+  let input = css`
     @tailwind base;
     @tailwind components;
     @layer components {
@@ -72,7 +66,7 @@ test('prefix', () => {
     }
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './prefix.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/raw-content.test.css b/tests/raw-content.test.css
similarity index 100%
rename from tests/jit/raw-content.test.css
rename to tests/raw-content.test.css
diff --git a/tests/jit/raw-content.test.html b/tests/raw-content.test.html
similarity index 100%
rename from tests/jit/raw-content.test.html
rename to tests/raw-content.test.html
diff --git a/tests/jit/raw-content.test.js b/tests/raw-content.test.js
similarity index 64%
rename from tests/jit/raw-content.test.js
rename to tests/raw-content.test.js
index 497532bdf..563d2b50c 100644
--- a/tests/jit/raw-content.test.js
+++ b/tests/raw-content.test.js
@@ -1,33 +1,23 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
 
-beforeEach(() => {
-  jest.resetModules()
-})
+import { run, css } from './util/run'
 
-function run(tailwind, input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+beforeEach(() => jest.resetModules())
 
 test('raw content', () => {
-  let tailwind = require('../../src')
-
+  let tailwind = require('../src')
   let config = {
     content: [{ raw: fs.readFileSync(path.resolve(__dirname, './raw-content.test.html'), 'utf8') }],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  let css = `
+  let input = css`
     @tailwind components;
     @tailwind utilities;
   `
 
-  return run(tailwind, css, config).then((result) => {
+  return run(input, config, tailwind).then((result) => {
     let expectedPath = path.resolve(__dirname, './raw-content.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
@@ -36,8 +26,7 @@ test('raw content', () => {
 })
 
 test('raw content with extension', () => {
-  let tailwind = require('../../src')
-
+  let tailwind = require('../src')
   let config = {
     content: {
       content: [
@@ -56,14 +45,10 @@ test('raw content with extension', () => {
       },
     },
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  let css = `@tailwind utilities;`
-
-  return run(tailwind, css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run('@tailwind utilities', config, tailwind).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .invisible {
         visibility: hidden;
       }
diff --git a/tests/jit/relative-purge-paths.test.html b/tests/relative-purge-paths.test.html
similarity index 100%
rename from tests/jit/relative-purge-paths.test.html
rename to tests/relative-purge-paths.test.html
diff --git a/tests/relative-purge-paths.test.js b/tests/relative-purge-paths.test.js
new file mode 100644
index 000000000..0e7e5feed
--- /dev/null
+++ b/tests/relative-purge-paths.test.js
@@ -0,0 +1,22 @@
+import { run, css } from './util/run'
+
+test('relative purge paths', () => {
+  let config = {
+    content: ['./tests/relative-purge-paths.test.html'],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  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/resolve-defaults-at-rules.test.js
similarity index 87%
rename from tests/jit/resolve-defaults-at-rules.test.js
rename to tests/resolve-defaults-at-rules.test.js
index e4c9e197f..7d87d9297 100644
--- a/tests/jit/resolve-defaults-at-rules.test.js
+++ b/tests/resolve-defaults-at-rules.test.js
@@ -1,28 +1,8 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  const { currentTestName } = expect.getState()
-
-  return postcss(tailwind(config)).process(input, {
-    from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
+import { run, html, css } from './util/run'
 
 test('basic utilities', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="scale-x-110 rotate-3 skew-y-6"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="scale-x-110 rotate-3 skew-y-6"></div>` }],
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
@@ -68,12 +48,8 @@ test('basic utilities', async () => {
 test('with pseudo-class variants', async () => {
   let config = {
     content: [
-      {
-        raw: '<div class="hover:scale-x-110 focus:rotate-3 hover:focus:skew-y-6"></div>',
-      },
+      { raw: html`<div class="hover:scale-x-110 focus:rotate-3 hover:focus:skew-y-6"></div>` },
     ],
-    theme: {},
-    plugins: [],
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
@@ -118,13 +94,7 @@ test('with pseudo-class variants', async () => {
 
 test('with pseudo-element variants', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="before:scale-x-110 after:rotate-3"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="before:scale-x-110 after:rotate-3"></div>` }],
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
@@ -167,13 +137,7 @@ test('with pseudo-element variants', async () => {
 
 test('with multi-class variants', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="group-hover:scale-x-110 peer-focus:rotate-3"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="group-hover:scale-x-110 peer-focus:rotate-3"></div>` }],
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
@@ -215,12 +179,8 @@ test('with multi-class variants', async () => {
 test('with multi-class pseudo-element variants', async () => {
   let config = {
     content: [
-      {
-        raw: '<div class="group-hover:before:scale-x-110 peer-focus:after:rotate-3"></div>',
-      },
+      { raw: html`<div class="group-hover:before:scale-x-110 peer-focus:after:rotate-3"></div>` },
     ],
-    theme: {},
-    plugins: [],
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
@@ -265,11 +225,11 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
   let config = {
     content: [
       {
-        raw: '<div class="group-hover:hover:before:scale-x-110 peer-focus:focus:after:rotate-3"></div>',
+        raw: html`<div
+          class="group-hover:hover:before:scale-x-110 peer-focus:focus:after:rotate-3"
+        ></div>`,
       },
     ],
-    theme: {},
-    plugins: [],
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
@@ -312,13 +272,7 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
 
 test('with apply', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="foo"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="foo"></div>` }],
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
@@ -439,13 +393,7 @@ test('with apply', async () => {
 
 test('with borders', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="border border-red-500 md:border-2"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="border border-red-500 md:border-2"></div>` }],
     corePlugins: ['borderWidth', 'borderColor', 'borderOpacity'],
   }
 
@@ -482,13 +430,7 @@ test('with borders', async () => {
 
 test('with shadows', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="shadow md:shadow-xl ring-1 ring-black/25"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="shadow md:shadow-xl ring-1 ring-black/25"></div>` }],
     corePlugins: ['boxShadow', 'ringColor', 'ringWidth'],
   }
 
@@ -543,13 +485,7 @@ test('with shadows', async () => {
 
 test('when no utilities that need the defaults are used', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class=""></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class=""></div>` }],
     corePlugins: ['transform', 'scale', 'rotate', 'skew'],
   }
 
@@ -568,13 +504,7 @@ test('when no utilities that need the defaults are used', async () => {
 
 test('when a utility uses defaults but they do not exist', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="rotate-3"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="rotate-3"></div>` }],
     corePlugins: ['rotate'],
   }
 
@@ -597,13 +527,7 @@ test('when a utility uses defaults but they do not exist', async () => {
 
 test('selectors are reduced to the lowest possible specificity', async () => {
   let config = {
-    content: [
-      {
-        raw: '<div class="foo"></div>',
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="foo"></div>` }],
     corePlugins: [],
   }
 
diff --git a/tests/jit/responsive-and-variants-atrules.test.css b/tests/responsive-and-variants-atrules.test.css
similarity index 100%
rename from tests/jit/responsive-and-variants-atrules.test.css
rename to tests/responsive-and-variants-atrules.test.css
diff --git a/tests/jit/responsive-and-variants-atrules.test.html b/tests/responsive-and-variants-atrules.test.html
similarity index 100%
rename from tests/jit/responsive-and-variants-atrules.test.html
rename to tests/responsive-and-variants-atrules.test.html
diff --git a/tests/jit/responsive-and-variants-atrules.test.js b/tests/responsive-and-variants-atrules.test.js
similarity index 83%
rename from tests/jit/responsive-and-variants-atrules.test.js
rename to tests/responsive-and-variants-atrules.test.js
index 59e88de7f..4bebc73fa 100644
--- a/tests/jit/responsive-and-variants-atrules.test.js
+++ b/tests/responsive-and-variants-atrules.test.js
@@ -1,23 +1,15 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('responsive and variants atrules', () => {
   let config = {
     content: [path.resolve(__dirname, './responsive-and-variants-atrules.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
-  let css = `
+  let input = css`
     @tailwind components;
     @tailwind utilities;
 
@@ -80,7 +72,7 @@ test('responsive and variants atrules', () => {
     }
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './responsive-and-variants-atrules.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/svelte-syntax.test.css b/tests/svelte-syntax.test.css
similarity index 100%
rename from tests/jit/svelte-syntax.test.css
rename to tests/svelte-syntax.test.css
diff --git a/tests/jit/svelte-syntax.test.js b/tests/svelte-syntax.test.js
similarity index 65%
rename from tests/jit/svelte-syntax.test.js
rename to tests/svelte-syntax.test.js
index 83f303cec..38bf51f69 100644
--- a/tests/jit/svelte-syntax.test.js
+++ b/tests/svelte-syntax.test.js
@@ -1,13 +1,7 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
+import { run, css } from './util/run'
 
 test('basic usage', () => {
   let config = {
@@ -17,12 +11,12 @@ test('basic usage', () => {
     plugins: [],
   }
 
-  let css = `
+  let input = css`
     @tailwind components;
     @tailwind utilities;
   `
 
-  return run(css, config).then((result) => {
+  return run(input, config).then((result) => {
     let expectedPath = path.resolve(__dirname, './svelte-syntax.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
diff --git a/tests/jit/svelte-syntax.test.svelte b/tests/svelte-syntax.test.svelte
similarity index 100%
rename from tests/jit/svelte-syntax.test.svelte
rename to tests/svelte-syntax.test.svelte
diff --git a/tests/jit/tailwind-screens.test.js b/tests/tailwind-screens.test.js
similarity index 55%
rename from tests/jit/tailwind-screens.test.js
rename to tests/tailwind-screens.test.js
index 471b3ac28..b52edcad7 100644
--- a/tests/jit/tailwind-screens.test.js
+++ b/tests/tailwind-screens.test.js
@@ -1,27 +1,11 @@
-import postcss from 'postcss'
-import path from 'path'
-import tailwind from '../../src'
-
-function run(input, config = {}) {
-  const { currentTestName } = expect.getState()
-
-  return postcss(tailwind(config)).process(input, {
-    from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  })
-}
+import { run, html, css } from './util/run'
 
 test('class variants are inserted at `@tailwind variants`', async () => {
   let config = {
-    content: [
-      {
-        raw: `font-bold hover:font-bold md:font-bold`,
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="font-bold hover:font-bold md:font-bold"></div>` }],
   }
 
-  let css = `
+  let input = css`
     @tailwind utilities;
     @tailwind variants;
     .foo {
@@ -29,8 +13,8 @@ test('class variants are inserted at `@tailwind variants`', async () => {
     }
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .font-bold {
         font-weight: 700;
       }
@@ -51,16 +35,10 @@ test('class variants are inserted at `@tailwind variants`', async () => {
 
 test('`@tailwind screens` works as an alias for `@tailwind variants`', async () => {
   let config = {
-    content: [
-      {
-        raw: `font-bold hover:font-bold md:font-bold`,
-      },
-    ],
-    theme: {},
-    plugins: [],
+    content: [{ raw: html`<div class="font-bold hover:font-bold md:font-bold"></div>` }],
   }
 
-  let css = `
+  let input = css`
     @tailwind utilities;
     @tailwind screens;
     .foo {
@@ -68,8 +46,8 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async ()
     }
   `
 
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
       .font-bold {
         font-weight: 700;
       }
diff --git a/tests/util/invokePlugin.js b/tests/util/invokePlugin.js
index 64af73757..c58d1f07d 100644
--- a/tests/util/invokePlugin.js
+++ b/tests/util/invokePlugin.js
@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import escapeClassName from '../../src/util/escapeClassName'
+import escapeClassName from '../src/util/escapeClassName'
 
 export default function (plugin, config) {
   const addedUtilities = []
diff --git a/tests/util/run.js b/tests/util/run.js
new file mode 100644
index 000000000..71c7fc4fe
--- /dev/null
+++ b/tests/util/run.js
@@ -0,0 +1,19 @@
+import path from 'path'
+import postcss from 'postcss'
+import tailwind from '../../src'
+
+export function run(input, config, plugin = tailwind) {
+  let { currentTestName } = expect.getState()
+
+  return postcss(plugin(config)).process(input, {
+    from: `${path.resolve(__filename)}?test=${currentTestName}`,
+  })
+}
+
+function syntax(templates) {
+  return templates.join('')
+}
+
+export let css = syntax
+export let html = syntax
+export let javascript = syntax
diff --git a/tests/jit/variants.test.css b/tests/variants.test.css
similarity index 100%
rename from tests/jit/variants.test.css
rename to tests/variants.test.css
diff --git a/tests/jit/variants.test.html b/tests/variants.test.html
similarity index 100%
rename from tests/jit/variants.test.html
rename to tests/variants.test.html
diff --git a/tests/jit/variants.test.js b/tests/variants.test.js
similarity index 78%
rename from tests/jit/variants.test.js
rename to tests/variants.test.js
index 7272eafef..d6e8cea1e 100644
--- a/tests/jit/variants.test.js
+++ b/tests/variants.test.js
@@ -1,25 +1,13 @@
-import postcss from 'postcss'
 import fs from 'fs'
 import path from 'path'
-import tailwind from '../../src'
 
-function run(input, config = {}) {
-  return postcss(tailwind(config)).process(input, {
-    from: path.resolve(__filename),
-  })
-}
-
-function css(templates) {
-  return templates.join('')
-}
+import { run, css } from './util/run'
 
 test('variants', () => {
   let config = {
     darkMode: 'class',
     content: [path.resolve(__dirname, './variants.test.html')],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
   let input = css`
@@ -40,8 +28,6 @@ test('stacked peer variants', async () => {
   let config = {
     content: [{ raw: 'peer-disabled:peer-focus:peer-hover:border-blue-500' }],
     corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
   }
 
   let input = css`