diff --git a/tests/svelte-syntax.test.js b/tests/svelte-syntax.test.js
deleted file mode 100644
index 38bf51f69..000000000
--- a/tests/svelte-syntax.test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-import { run, css } from './util/run'
-
-test('basic usage', () => {
-  let config = {
-    content: [path.resolve(__dirname, './svelte-syntax.test.svelte')],
-    corePlugins: { preflight: false },
-    theme: {},
-    plugins: [],
-  }
-
-  let input = css`
-    @tailwind components;
-    @tailwind utilities;
-  `
-
-  return run(input, config).then((result) => {
-    let expectedPath = path.resolve(__dirname, './svelte-syntax.test.css')
-    let expected = fs.readFileSync(expectedPath, 'utf8')
-
-    expect(result.css).toMatchFormattedCss(expected)
-  })
-})
diff --git a/tests/svelte-syntax.test.css b/tests/syntax-svelte.css
similarity index 100%
rename from tests/svelte-syntax.test.css
rename to tests/syntax-svelte.css
diff --git a/tests/syntax-svelte.js b/tests/syntax-svelte.js
new file mode 100644
index 000000000..251b526ab
--- /dev/null
+++ b/tests/syntax-svelte.js
@@ -0,0 +1,80 @@
+import path from 'path'
+
+import { run } from './util/run'
+
+let css = String.raw
+
+test('it detects svelte based on the file extension', () => {
+  let config = {
+    content: [path.resolve(__dirname, './svelte-syntax.test.svelte')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .bg-red-500 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+      }
+      @media (min-width: 1024px) {
+        .lg\:hover\:bg-blue-500:hover {
+          --tw-bg-opacity: 1;
+          background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+        }
+      }
+    `)
+  })
+})
+
+test('using raw with svelte extension', () => {
+  let config = {
+    content: [
+      {
+        raw: `
+        <script>
+          let current = 'foo'
+        </script>
+
+        <button class:lg:hover:bg-blue-500={current === 'foo'}>Click me</button>
+
+        <button
+          class:bg-red-500={current === 'foo'}
+        >
+          Click me
+        </button>
+        `,
+        extension: 'svelte',
+      },
+    ],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .bg-red-500 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+      }
+      @media (min-width: 1024px) {
+        .lg\:hover\:bg-blue-500:hover {
+          --tw-bg-opacity: 1;
+          background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+        }
+      }
+    `)
+  })
+})
diff --git a/tests/svelte-syntax.test.svelte b/tests/syntax-svelte.test.svelte
similarity index 100%
rename from tests/svelte-syntax.test.svelte
rename to tests/syntax-svelte.test.svelte