refactor: move css components to windi shortcut

Author: hannoeru

components.d.ts

@@ -4,7 +4,6 @@
 declare module 'vue' {
   export interface GlobalComponents {
     Header: typeof import('./src/components/Header.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
   }
 }
 

src/style/main.css

@@ -13,26 +13,3 @@ body,
   text-align: center;
   color: #2c3e50;
 }
-
-@layer components {
-  .btn {
-    @apply
-      px-3.5 py-2 bg-primary text-white rounded-md
-      focus:outline-none;
-  }
-
-  .icon-btn {
-    @apply
-      p-2 text-2xl inline-flex items-center
-      focus:outline-none;
-  }
-
-  .tag {
-    @apply
-      inline-block p-1 bg-secondary text-white text-sm font-bold leading-4 rounded-sm;
-    &-outline {
-      @apply
-        bg-white border border-secondary text-secondary;
-    }
-  }
-}

windi.config.ts

@@ -9,4 +9,24 @@ export default defineConfig({
       },
     },
   },
+  shortcuts: {
+    'btn': {
+      '@apply': 'px-3.5 py-2 bg-primary text-white rounded-md',
+      '&:focus': {
+        '@apply': 'outline-none',
+      },
+    },
+    'icon-btn': {
+      '@apply': 'p-2 text-2xl inline-flex items-center',
+      '&:focus': {
+        '@apply': 'outline-none',
+      },
+    },
+    'tag': {
+      '@apply': 'inline-block p-1 bg-secondary text-white text-sm font-bold leading-4 rounded-sm',
+      '&-outline': {
+        '@apply': 'bg-white border border-secondary text-secondary',
+      },
+    },
+  },
 })