diff --git a/.changeset/dirty-hats-cry.md b/.changeset/dirty-hats-cry.md
new file mode 100644
index 000000000..acf9f6bb2
--- /dev/null
+++ b/.changeset/dirty-hats-cry.md
@@ -0,0 +1,7 @@
+---
+"@shopware/cms-base-layer": patch
+---
+
+Anchor tags with "btn btn-primary" classes from the API were not being
+transformed to Tailwind utility classes due to condition matching issues
+in the html-to-vue renderer.
\ No newline at end of file
diff --git a/packages/cms-base-layer/app/components/public/cms/element/CmsElementText.vue b/packages/cms-base-layer/app/components/public/cms/element/CmsElementText.vue
index 6bff88d1a..b05ac8de4 100644
--- a/packages/cms-base-layer/app/components/public/cms/element/CmsElementText.vue
+++ b/packages/cms-base-layer/app/components/public/cms/element/CmsElementText.vue
@@ -37,7 +37,7 @@ const CmsTextRender = defineComponent({
             return (
               node.type === "tag" &&
               node.name === "a" &&
-              !node.attrs?.class?.match(/btn\s?/)
+              !node.attrs?.class?.includes("btn")
             );
           },
           renderer(
@@ -61,7 +61,7 @@ const CmsTextRender = defineComponent({
             return (
               node.type === "tag" &&
               node.name === "a" &&
-              node.attrs?.class?.match(/btn\s?/)
+              !!node.attrs?.class?.includes("btn")
             );
           },
           renderer(
@@ -75,6 +75,7 @@ const CmsTextRender = defineComponent({
                 "rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
 
               _class = node.attrs.class
+                .replace(/\bbtn\s+/, "")
                 .replace(
                   "btn-secondary",
                   `${btnClass} bg-brand-secondary text-brand-on-secondary hover:bg-brand-secondary-hover`,
@@ -82,7 +83,8 @@ const CmsTextRender = defineComponent({
                 .replace(
                   "btn-primary",
                   `${btnClass} bg-brand-primary text-brand-on-primary hover:bg-brand-primary-hover`,
-                );
+                )
+                .trim();
             }
 
             return createElement(
diff --git a/packages/cms-base-layer/app/helpers/html-to-vue/renderer.ts b/packages/cms-base-layer/app/helpers/html-to-vue/renderer.ts
index 0eca9cfda..9b229ad44 100644
--- a/packages/cms-base-layer/app/helpers/html-to-vue/renderer.ts
+++ b/packages/cms-base-layer/app/helpers/html-to-vue/renderer.ts
@@ -39,7 +39,7 @@ export function renderer(ast, config, createElement, context, resolveUrl) {
         if (typeof config.extraComponentsMap[node.name] !== "undefined") {
           return config.extraComponentsMap[node.name].renderer.call(
             this,
-            transformedNode,
+            node,
             children,
             h,
             context,
diff --git a/templates/vue-demo-store/uno.config.ts b/templates/vue-demo-store/uno.config.ts
index 40750422b..94975637f 100644
--- a/templates/vue-demo-store/uno.config.ts
+++ b/templates/vue-demo-store/uno.config.ts
@@ -98,6 +98,7 @@ const templateConfig: ConfigBase = {
       "warning-900": "#713f12",
       // Surface Colors (example for the transformer)
       "surface-surface": "#ffffff",
+      "surface-surface-primary": "#f0f8ff",
       "surface-surface-variant": "#f5f5f5",
       "surface-container": "#f0f0f0",
       "surface-container-high": "#e8e8e8",