diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue
index e43a65d2..25baeede 100644
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -115,24 +115,3 @@ defineShortcuts({
     </UModal>
   </UApp>
 </template>
-
-<style>
-@import "tailwindcss";
-@import "@nuxt/ui";
-
-@theme {
-  --font-sans: 'Public Sans', sans-serif;
-
-  --color-green-50: #EFFDF5;
-  --color-green-100: #D9FBE8;
-  --color-green-200: #B3F5D1;
-  --color-green-300: #75EDAE;
-  --color-green-400: #00DC82;
-  --color-green-500: #00C16A;
-  --color-green-600: #00A155;
-  --color-green-700: #007F45;
-  --color-green-800: #016538;
-  --color-green-900: #0A5331;
-  --color-green-950: #052E16;
-}
-</style>
diff --git a/playground-vue/src/assets/css/main.css b/playground-vue/src/assets/css/main.css
new file mode 100644
index 00000000..4fdb81af
--- /dev/null
+++ b/playground-vue/src/assets/css/main.css
@@ -0,0 +1,18 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --font-sans: 'Public Sans', sans-serif;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052E16;
+}
diff --git a/playground-vue/src/main.ts b/playground-vue/src/main.ts
index 889c1e18..ef8e487d 100644
--- a/playground-vue/src/main.ts
+++ b/playground-vue/src/main.ts
@@ -1,3 +1,5 @@
+import './assets/css/main.css'
+
 import { createApp, defineAsyncComponent, ref } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import uiPlugin from '@nuxt/ui/vue-plugin'