diff --git a/playground/app/app.vue b/playground/app/app.vue
index edfde296..c382c904 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -120,24 +120,3 @@ defineShortcuts({
     <NuxtPage />
   </template>
 </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/app/assets/css/main.css b/playground/app/assets/css/main.css
new file mode 100644
index 00000000..4fdb81af
--- /dev/null
+++ b/playground/app/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/nuxt.config.ts b/playground/nuxt.config.ts
index 000e9e36..571cc6cc 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -12,6 +12,8 @@ export default defineNuxtConfig({
     enabled: true
   },
 
+  css: ['~/assets/css/main.css'],
+
   ui: {
     fonts: !process.env.DEVTOOLS
   },