feat: add unocss

Author: cwandev

app.vue

@@ -1,5 +1,22 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <div id="app">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
 </template>
+
+<style>
+html,
+body,
+#__nuxt {
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+</style>

eslint.config.ts

@@ -1,4 +1,7 @@
 import antfu from '@antfu/eslint-config'
 import nuxt from './.nuxt/eslint.config.mjs'
 
-export default antfu({}, nuxt)
+export default antfu({
+  unocss: true,
+  formatters: true,
+}, nuxt)

nuxt.config.ts

@@ -2,13 +2,18 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: [
     '@vant/nuxt',
+    '@unocss/nuxt',
     'nuxt-module-eslint-config',
   ],
 
   typescript: {
     shim: false,
   },
 
+  css: [
+    '@unocss/reset/tailwind.css',
+  ],
+
   postcss: {
     plugins: {
       // https://github.com/wswmsword/postcss-mobile-forever

package.json

@@ -18,6 +18,8 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.7.0",
+    "@unocss/nuxt": "^0.58.6",
+    "@unocss/preset-rem-to-px": "^0.58.6",
     "@vant/nuxt": "^1.0.4",
     "eslint": "npm:eslint-ts-patch@^8.57.0-0",
     "eslint-ts-patch": "^8.57.0-0",

pages/index.vue

@@ -1,25 +1,8 @@
-<script lang="ts" setup>
-
-</script>
-
 <template>
-  <div id="app">
-    <div class="txt">
-      init
-    </div>
+  <div class="text-16 text-gray-800">
+    你好
   </div>
 </template>
 
 <style scoped>
-#app {
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-}
-
-.txt {
-  position: relative;
-  top: 10px;
-  transform: translateY(-10px);
-}
 </style>