feat: use unocss wind4 preset

Author: cwandev

app/layouts/default.vue

@@ -2,7 +2,7 @@
   <main class="flex flex-col min-h-svh">
     <AppHeader class="h-[var(--van-nav-bar-height)]" />
 
-    <div class="flex-1 p-16 pb-[var(--van-nav-bar-height)]">
+    <div class="p-16 pb-[var(--van-nav-bar-height)] flex-1">
       <slot />
     </div>
 

app/pages/counter/index.vue

@@ -19,7 +19,7 @@ function add() {
       Hello, Pinia!
     </h1>
 
-    <p class="mt-10 text-gray-700 dark:text-white">
+    <p class="text-gray-700 mt-10 dark:text-white">
       {{ $t('counter_page.label') }}
     </p>
 

app/pages/profile/index.vue

@@ -7,7 +7,7 @@ definePageMeta({
 </script>
 
 <template>
-  <div mx-auto mb-60 pt-15 text-center text-16 text-dark dark:text-white>
+  <div text-16 text-dark mx-auto mb-60 pt-15 text-center dark:text-white>
     {{ $t('profile_page.txt') }}
   </div>
 </template>

app/pages/prose/index.vue

@@ -20,7 +20,7 @@ function clear() {
 
 <template>
   <div>
-    <div class="h-300 flex items-center justify-center rounded-15 bg-white p-16 dark:bg-[--van-background-2]">
+    <div class="p-16 rounded-15 bg-white flex h-300 items-center justify-center dark:bg-[--van-background-2]">
       <div v-if="proseStore.prose" class="text-16 leading-26">
         {{ proseStore.prose }}
       </div>

app/pages/unocss/index.vue

@@ -11,7 +11,7 @@ definePageMeta({
       {{ $t('unocss_page.hello', ['Unocss!']) }}
     </h1>
 
-    <p class="mt-10 text-gray-700 dark:text-white">
+    <p class="text-gray-700 mt-10 dark:text-white">
       {{ $t('unocss_page.desc') }}
     </p>
 

nuxt.config.ts

@@ -21,7 +21,6 @@ export default defineNuxtConfig({
   },
 
   css: [
-    '@unocss/reset/tailwind.css',
     './app/styles/vars.css',
     './app/styles/global.css',
     './app/styles/default-theme.css',

package.json

@@ -32,7 +32,6 @@
     "@pinia/nuxt": "^0.11.0",
     "@unocss/eslint-plugin": "66.1.0-beta.11",
     "@unocss/nuxt": "66.1.0-beta.11",
-    "@unocss/preset-rem-to-px": "66.1.0-beta.11",
     "@vant/nuxt": "^1.0.6",
     "bumpp": "^10.1.0",
     "eslint": "^9.24.0",

pnpm-lock.yaml

@@ -1,31 +1,38 @@
-import presetRemToPx from '@unocss/preset-rem-to-px'
-import presetWind3 from '@unocss/preset-wind3'
+import { createRemToPxResolver } from '@unocss/preset-wind4/utils'
 
 import {
   defineConfig,
   presetAttributify,
   presetIcons,
   presetTypography,
   presetWebFonts,
+  presetWind4,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
 
-// https://unocss.dev/guide/config-file
+/**
+ * The base font size to convert rem to px (1rem = n px).
+ */
+const BASE_FONT_SIZE = 4
+
 export default defineConfig({
   shortcuts: [
-    // shortcuts to multiple utilities
     ['btn', 'px-6 py-3 rounded-3 inline-block bg-primary text-white cursor-pointer hover:bg-primary-hover disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
   ],
 
   presets: [
-    presetWind3(),
+    presetWind4({
+      /**
+       * Converts rem to px for all utilities
+       */
+      utilityResolver: createRemToPxResolver(BASE_FONT_SIZE),
+    }),
     presetAttributify(),
     presetIcons(),
     presetTypography(),
-    presetWebFonts(),
-    presetRemToPx({
-      baseFontSize: 4,
+    presetWebFonts({
+      themeKey: 'font',
     }),
   ],