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>

nuxt.config.ts

@@ -33,10 +33,6 @@ export default defineNuxtConfig({
     },
   },
 
-  css: [
-    '@unocss/reset/tailwind.css',
-  ],
-
   colorMode: {
     classSuffix: '',
   },

package.json

@@ -14,23 +14,24 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.4.0",
+    "@antfu/eslint-config": "^4.5.1",
     "@iconify-json/carbon": "^1.2.8",
     "@iconify-json/twemoji": "^1.2.2",
     "@nuxt/devtools": "^2.1.3",
     "@nuxt/eslint": "^1.1.0",
     "@nuxtjs/color-mode": "^3.5.2",
     "@pinia/nuxt": "^0.10.1",
-    "@unocss/eslint-config": "^66.0.0",
-    "@unocss/nuxt": "^66.0.0",
+    "@unocss/eslint-config": "^66.1.0-beta.3",
+    "@unocss/nuxt": "^66.1.0-beta.3",
     "@vite-pwa/nuxt": "^0.10.6",
-    "@vueuse/nuxt": "^12.7.0",
+    "@vueuse/nuxt": "^12.8.0",
     "consola": "^3.4.0",
     "eslint": "^9.21.0",
     "eslint-plugin-format": "^1.0.1",
     "nuxt": "^3.15.4",
     "pinia": "^3.0.1",
     "typescript": "^5.8.2",
+    "unocss": "66.1.0-beta.3",
     "vue-tsc": "^2.2.8"
   },
   "pnpm": {

uno.config.ts

@@ -4,8 +4,8 @@ import {
   presetAttributify,
   presetIcons,
   presetTypography,
-  presetUno,
   presetWebFonts,
+  presetWind4,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
@@ -16,7 +16,7 @@ export default defineConfig({
     ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
   ],
   presets: [
-    presetUno(),
+    presetWind4(),
     presetAttributify(),
     presetIcons({
       scale: 1.2,