feat: use unocss wind4 preset

app/components/Counter.vue

@@ -4,13 +4,13 @@ const { count, inc, dec } = useCount()
 
 <template>
   <div inline-flex m="y-3">
-    <button rounded-full p-2 btn @click="dec()">
+    <button p-2 rounded-full btn @click="dec()">
       <div i-carbon-subtract />
     </button>
     <div font="mono" w="15" m-auto inline-block>
       {{ count }}
     </div>
-    <button rounded-full p-2 btn @click="inc()">
+    <button p-2 rounded-full btn @click="inc()">
       <div i-carbon-add />
     </button>
   </div>

app/components/InputEntry.vue

@@ -14,7 +14,8 @@ function go() {
       id="input"
       v-model="name"
       placeholder="What's your name?"
-      type="text" autocomplete="off"
+      type="text"
+      autocomplete="off"
       p="x-4 y-2" m="t-5" w="250px"
       text="center" bg="transparent"
       border="~ rounded gray-200 dark:gray-700"
@@ -23,7 +24,7 @@ function go() {
     >
     <div>
       <button
-        m-3 text-sm btn
+        text-sm m-3 btn
         :disabled="!name"
         @click="go"
       >

app/components/Logos.vue

@@ -1,8 +1,8 @@
 <template>
-  <div inline-flex cursor-default text-2xl font-300>
+  <div text-2xl font-300 inline-flex cursor-default>
     <div flex flex-col children:mx-auto>
-      <img inline-block h-18 w-18 src="/nuxt.svg">
-      <span mt--2 text-green5>Nuxt 3</span>
+      <img h-18 w-18 inline-block src="/nuxt.svg">
+      <span text-green5 mt--2>Nuxt 3</span>
     </div>
     <div
       text="3xl gray4"
@@ -10,8 +10,8 @@
       i-carbon-add transform transition-all-500 hover:rotate-135
     />
     <div flex flex-col children:mx-auto>
-      <img inline-block h-18 w-18 src="/vite.png">
-      <span mt--2 text-purple5>Vitesse</span>
+      <img h-18 w-18 inline-block src="/vite.png">
+      <span text-purple-500 mt--2>Vitesse</span>
     </div>
   </div>
 </template>