fix(playground): enable magic animates

unocss-community · Mar 12, 2024 · ab50a88 · ab50a88
1 parent 04dc964
commit ab50a88
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="ma prose">
-    <div fcc gap-8 un-children="fcc w-30 h-30 rd b b-red b-solid text-white text-xl">
+    <div fcc gap-8 un-children="fcc w-30 h-30 rd b">
       <div hover="animate-puffIn">
         puffIn
       </div>
       <div hover="animate-puffOut">
         puffOut
       </div>
-      <div hover="animate-magic">
+      <div hover-animate-magic>
         magic
       </div>
     </div>
@@ -20,5 +20,6 @@
   padding: 0;
   box-sizing: border-box;
   background: #222;
+  color: white;
 }
 </style>
diff --git a/playground/uno.config.ts b/playground/uno.config.ts
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -4,5 +4,8 @@ import UnoCSS from 'unocss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), UnoCSS()],
+  plugins: [
+    vue(),
+    UnoCSS('../uno.config.ts'),
+  ],
 })
diff --git a/uno.config.ts b/uno.config.ts
@@ -7,6 +7,7 @@ export default defineConfig({
   presets: [
     presetUseful({
       typography: true,
+      enableMagicAnimations: true,
     }),
   ],
 })