feat: use unocss wind4 preset

app/app.vue

@@ -23,7 +23,6 @@ body,
 }
 
 html.dark {
-  background: #222;
-  color: white;
+  color-scheme: dark;
 }
 </style>

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>

app/layouts/default.vue

@@ -2,7 +2,7 @@
   <main class="px-10 py-20 text-center">
     <slot />
     <Footer />
-    <div class="mx-auto mt-5 text-center text-sm opacity-25">
+    <div class="text-sm mx-auto mt-5 text-center opacity-25">
       [Default Layout]
     </div>
   </main>

app/layouts/home.vue

@@ -2,7 +2,7 @@
   <main class="px-10 py-20 text-center">
     <slot />
     <Footer />
-    <div class="mx-auto mt-5 text-center text-sm opacity-25">
+    <div class="text-sm mx-auto mt-5 text-center opacity-25">
       [Home Layout]
     </div>
   </main>

app/pages/hi/[id].vue

@@ -14,7 +14,7 @@ definePageMeta({
 
 <template>
   <div>
-    <div i-twemoji:waving-hand inline-block animate-shake-x animate-duration-5000 text-4xl />
+    <div i-twemoji:waving-hand text-4xl inline-block animate-shake-x animate-duration-5000 />
     <h3 text-2xl font-500>
       Hi,
     </h3>
@@ -23,7 +23,7 @@ definePageMeta({
     </div>
 
     <template v-if="user.otherNames.length">
-      <div my-4 text-sm>
+      <div text-sm my-4>
         <span op-50>Also as known as:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
@@ -39,7 +39,7 @@ definePageMeta({
 
     <div>
       <NuxtLink
-        class="m-3 text-sm btn"
+        class="text-sm m-3 btn"
         to="/"
       >
         Back

app/pages/index.vue

@@ -16,7 +16,7 @@ const online = useOnline()
           You're offline
         </div>
         <template #fallback>
-          <div italic op50>
+          <div op50 italic>
             <span animate-pulse>Loading...</span>
           </div>
         </template>