diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts
index 7d3c6e75..97e2b6a8 100644
--- a/packages/cli/src/utils/transformers/transform-css-vars.ts
+++ b/packages/cli/src/utils/transformers/transform-css-vars.ts
@@ -1,6 +1,7 @@
 import type * as z from 'zod'
 import MagicString from 'magic-string'
 import { parse, walk } from '@vue/compiler-sfc'
+import { SyntaxKind } from 'ts-morph'
 import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
 import type { Transformer } from '@/src/utils/transformers'
 
@@ -19,34 +20,24 @@ export const transformCssVars: Transformer = async ({
   if (!template)
     return sourceFile
 
-  type ElementNode = typeof template.ast
-  type TemplateNode = ElementNode['children'][number]
+  sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
+    if (template.loc.start.offset >= node.getPos())
+      return sourceFile
 
-  const parseNode = (node: ElementNode | TemplateNode) => {
-    if ('props' in node) {
-      for (const prop of node.props) {
-        // for component
-        if ('arg' in prop && prop.arg && 'content' in prop.exp! && prop.exp) {
-          if ('content' in prop.arg && prop.arg?.content === 'class') {
-            const s = new MagicString(prop.exp.content)
-            s.replace(/'(.*?)'/g, (substring) => {
-              return `'${applyColorMapping(substring, baseColor.inlineColors)}'`
-            })
-            sourceFile.replaceText([prop.exp.loc.start.offset, prop.exp.loc.end.offset], s.toString())
-          }
-        }
-      }
-    }
-    if ('children' in node) {
-      for (const child of node.children)
-        parseNode(child as TemplateNode)
-    }
-  }
+    const value = node.getText()
 
-  walk(template?.ast, {
-    enter(node: ElementNode) {
-      parseNode(node)
-    },
+    const hasClosingDoubleQuote = value.match(/"/g)?.length === 2
+    if (value.search('\'') === -1 && hasClosingDoubleQuote) {
+      const mapped = applyColorMapping(value.replace(/"/g, ''), baseColor.inlineColors)
+      node.replaceWithText(`"${mapped}"`)
+    }
+    else {
+      const s = new MagicString(value)
+      s.replace(/'(.*?)'/g, (substring) => {
+        return `'${applyColorMapping(substring.replace(/\'/g, ''), baseColor.inlineColors)}'`
+      })
+      node.replaceWithText(s.toString())
+    }
   })
 
   return sourceFile
@@ -124,7 +115,6 @@ export function applyColorMapping(
     if (!lightMode.includes(className))
       lightMode.push(className)
   }
-
   const combined = `${lightMode.join(' ').replace(/\'/g, '')} ${darkMode.join(' ').trim()}`.trim()
   return `${combined}`
 }
diff --git a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
index 0e927a78..68143755 100644
--- a/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap
@@ -1,8 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`handle tailwind config template correctly 1`] = `
-"
-import animate from \\"tailwindcss-animate\\"
+"import animate from \\"tailwindcss-animate\\"
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -43,9 +42,7 @@ export default {
 `;
 
 exports[`handle tailwind config template correctly 2`] = `
-"
-
-import animate from \\"tailwindcss-animate\\"
+"import animate from \\"tailwindcss-animate\\"
 
 /** @type {import('tailwindcss').Config} */
 export default {
diff --git a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
index 9a57aa19..964b9aad 100644
--- a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
@@ -17,6 +17,6 @@ exports[`transform css vars 2`] = `
 exports[`transform css vars 3`] = `
 "<script setup lang=\\"ts\\"></script>
 <template>
-<div :class=\\"cn( 'bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800', true &&  'text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50')\\" >foo</div>
+<div :class=\\"cn('bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800', true && 'text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50')\\">foo</div>
 </template>\\""
 `;