diff --git a/jit/lib/expandTailwindAtRules.js b/jit/lib/expandTailwindAtRules.js
index 75e015accde9..5ed97751c4f3 100644
--- a/jit/lib/expandTailwindAtRules.js
+++ b/jit/lib/expandTailwindAtRules.js
@@ -15,7 +15,7 @@ const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/
function getDefaultExtractor(fileExtension) {
return function (content) {
if (fileExtension === 'svelte') {
- content = content.replace(/\sclass:/g, ' ')
+ content = content.replace(/(?:^|\s)class:/g, ' ')
}
let broadMatches = content.match(BROAD_MATCH_GLOBAL_REGEXP) || []
let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || []
diff --git a/jit/tests/svelte-syntax.test.css b/jit/tests/svelte-syntax.test.css
index d8a61adfba75..c95fe681432e 100644
--- a/jit/tests/svelte-syntax.test.css
+++ b/jit/tests/svelte-syntax.test.css
@@ -7,6 +7,10 @@
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
+.bg-red-500 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+}
@media (min-width: 1024px) {
.lg\:hover\:bg-blue-500:hover {
--tw-bg-opacity: 1;
diff --git a/jit/tests/svelte-syntax.test.svelte b/jit/tests/svelte-syntax.test.svelte
index a0d4e776c8b5..5a6ea3135061 100644
--- a/jit/tests/svelte-syntax.test.svelte
+++ b/jit/tests/svelte-syntax.test.svelte
@@ -3,3 +3,9 @@
+
+