diff --git a/src/index.js b/src/index.js
index 3f9a718..6df42cb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,6 @@
-import plugin from 'tailwindcss/plugin'
+const plugin = require('tailwindcss/plugin')
 
-const examplePlugin = plugin.withOptions(
+module.exports = plugin.withOptions(
   function (options) {
     const className = options ? options.className : 'markdown'
 
@@ -90,5 +90,3 @@ const examplePlugin = plugin.withOptions(
     }
   }
 )
-
-export default examplePlugin
diff --git a/src/index.test.js b/src/index.test.js
new file mode 100644
index 0000000..60ff84a
--- /dev/null
+++ b/src/index.test.js
@@ -0,0 +1,186 @@
+import path from 'path'
+import postcss from 'postcss'
+import examplePlugin from '.'
+import { expect, test } from 'vitest'
+import tailwindcss from 'tailwindcss'
+
+// Custom CSS matcher
+expect.extend({
+  // Compare two CSS strings with all whitespace removed
+  // This is probably naive but it's fast and works well enough.
+  toMatchCss(received, argument) {
+    function stripped(string_) {
+      return string_.replaceAll(/\s/g, '').replaceAll(';', '')
+    }
+
+    const pass = stripped(received) === stripped(argument)
+
+    return {
+      pass,
+      actual: received,
+      expected: argument,
+      message: () => pass ? 'All good!' : 'CSS does not match',
+    }
+  }
+})
+
+// Function to run the plugin
+function run(config, css = '@tailwind utilities', plugin = tailwindcss) {
+  let { currentTestName } = expect.getState()
+
+  config = {
+    ...{
+      plugins: [examplePlugin],
+      corePlugins: {
+        preflight: false,
+      }
+    },
+    ...config,
+  }
+
+  return postcss(plugin(config)).process(css, {
+    from: `${path.resolve(__filename)}?test=${currentTestName}`,
+  })
+}
+
+test('addBase', () => {
+  const config = {
+    content: [
+      {
+        raw: String.raw`🫣`
+      }
+    ],
+    corePlugins: {
+      preflight: true,
+    },
+  }
+
+  return run(config, '@tailwind base').then(result => {
+    expect(result.css).toContain('*, ::before, ::after')
+  })
+})
+
+test('addUtilities', () => {
+  const config = {
+    content: [
+      {
+        raw: String.raw`
+          <div class="content-hidden"></div>
+          <div class="content-visible"></div>
+        `
+      }
+    ],
+  }
+
+  return run(config).then(result => {
+    expect(result.css).toMatchCss(String.raw`
+      .content-hidden {
+          content-visibility: hidden
+      }
+      .content-visible {
+          content-visibility: visible
+      }
+    `)
+  })
+})
+
+test('matchUtilities', () => {
+  const config = {
+    content: [
+      {
+        raw: String.raw`<div class="tab-2"></div>`
+      }
+    ],
+  }
+
+  return run(config).then(result => {
+    expect(result.css).toMatchCss(String.raw`
+      .tab-2 {
+          tab-size: 2
+      }
+    `)
+  })
+})
+
+test('addComponents', () => {
+  const config = {
+    content: [
+      {
+        raw: String.raw`<div class="btn"></div>`
+      }
+    ],
+    plugins: [
+      examplePlugin({
+        className: 'btn'
+      })
+    ],
+  }
+
+  return run(config, '@tailwind components').then(result => {
+    expect(result.css).toMatchCss(String.raw`
+      .btn {
+          padding: .5rem 1rem;
+          font-weight: 600
+      }
+    `)
+  })
+})
+
+test('addVariant', () => {
+  const config = {
+    content: [
+      {
+        raw: String.raw`<div class="optional:hidden"></div>`
+      }
+    ],
+  }
+
+  return run(config).then(result => {
+    expect(result.css).toMatchCss(String.raw`
+      .optional\:hidden:optional {
+          display: none
+      }
+    `)
+  })
+})
+
+test('addVariant (array)', () => {
+  const config = {
+    content: [
+      {
+        raw: String.raw`<div class="hocus:opacity-0"></div>`
+      }
+    ],
+  }
+
+  return run(config).then(result => {
+    expect(result.css).toMatchCss(String.raw`
+      .hocus\:opacity-0:hover {
+          opacity: 0
+      }
+      .hocus\:opacity-0:focus {
+          opacity: 0
+      }
+    `)
+  })
+})
+
+test('addVariant (media)', () => {
+  const config = {
+    content: [
+      {
+        raw: String.raw`<div class="supports-grid:hidden"></div>`
+      }
+    ],
+  }
+
+  return run(config).then(result => {
+    expect(result.css).toMatchCss(String.raw`
+      @supports (display: grid) {
+          .supports-grid\:hidden {
+              display: none
+          }
+      }
+    `)
+  })
+})
diff --git a/test/index.test.js b/test/index.test.js
deleted file mode 100644
index ce31809..0000000
--- a/test/index.test.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import path from 'path'
-import postcss from 'postcss'
-import examplePlugin from '../src'
-import { expect, test } from 'vitest'
-import tailwindcss from 'tailwindcss'
-
-function run(config, css = '@tailwind utilities', plugin = tailwindcss) {
-  let { currentTestName } = expect.getState()
-  config = {
-    ...{
-      plugins: [examplePlugin],
-      corePlugins: {
-        preflight: false,
-      }
-    },
-    ...config,
-  }
-
-  return postcss(plugin(config)).process(css, {
-    from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  })
-}
-
-test('addBase', () => {
-  const config = {
-    content: [{ raw: String.raw`<h1 class="underline">Level 1</h1>` }],
-    corePlugins: {
-      preflight: true,
-    },
-  }
-
-  return run(config, '@tailwind base; @tailwind utilities').then(result => {
-    const h1 = String.raw`h1 {
-  font-size: 1.5rem;
-}`
-
-    expect(result.css).toContain(h1)
-  })
-})
-
-test('addUtilities', () => {
-  const config = {
-    content: [{ raw: String.raw`
-    <div class="content-hidden"></div>
-    <div class="content-visible"></div>`
-  }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toEqual(String.raw`
-.content-hidden {
-    content-visibility: hidden
-}
-.content-visible {
-    content-visibility: visible
-}
-    `.trim())
-  })
-})
-
-test('matchUtilities', () => {
-  const config = { content: [{ raw: String.raw`<div class="tab-2"></div>` }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toEqual(String.raw`
-.tab-2 {
-    tab-size: 2
-}
-    `.trim())
-  })
-})
-
-test('addComponents', () => {
-  const config = {
-    content: [{ raw: String.raw`<div class="btn"></div>` }],
-    plugins: [
-      examplePlugin({
-        className: 'btn',
-      })
-    ],
-  }
-
-  return run(config, '@tailwind components').then(result => {
-    expect(result.css).toEqual(String.raw`
-.btn {
-    padding: .5rem 1rem;
-    font-weight: 600
-}
-    `.trim())
-  })
-})
-
-test('addVariant', () => {
-  const config = { content: [{ raw: String.raw`<div class="optional:hidden"></div>` }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toEqual(String.raw`
-.optional\:hidden:optional {
-    display: none
-}
-    `.trim())
-  })
-})
-
-test('addVariant (array)', () => {
-  const config = { content: [{ raw: String.raw`<div class="hocus:opacity-0"></div>` }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toEqual(String.raw`
-.hocus\:opacity-0:hover {
-    opacity: 0
-}
-.hocus\:opacity-0:focus {
-    opacity: 0
-}
-    `.trim())
-  })
-})
-
-test('addVariant (media)', () => {
-  const config = { content: [{ raw: String.raw`<div class="supports-grid:hidden"></div>` }],
-  }
-
-  return run(config).then(result => {
-    expect(result.css).toEqual(String.raw`
-@supports (display: grid) {
-    .supports-grid\:hidden {
-        display: none
-    }
-}
-    `.trim())
-  })
-})