Unocss

package.json

@@ -32,6 +32,7 @@
         "sass": "^1.77.8",
         "tslib": "^2.6.3",
         "typescript": "^5.5.4",
+        "unocss": "^66.5.4",
         "vite": "^7.1.12",
         "vue-tsc": "3.1.1"
     }

src/main.ts

@@ -6,6 +6,7 @@ import '@fortawesome/fontawesome-free/css/all.min.css'
 import Collapse from "@/components/Collapse.vue"
 import BlogIndex from "@/components/BlogIndex.vue";
 import Tag from "@/components/Tag.vue";
+import 'virtual:uno.css'
 
 const app = createApp(App).use(router).use(i18n)
     .component('Collapse', Collapse)

uno.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig, presetWind3, presetAttributify, presetIcons, presetTypography, presetWebFonts, transformerDirectives } from "unocss";
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetAttributify(),
+    presetIcons(),
+    presetTypography(),
+  ]
+})

vite.config.ts

@@ -1,12 +1,13 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import UnoCSS from 'unocss/vite';
 import path from "path";
 
 const src = path.resolve(__dirname, 'src')
 
 export default defineConfig({
   plugins: [
-    vue()
+    vue(), UnoCSS()
   ],
   resolve: {
     alias: {
@@ -16,5 +17,10 @@ export default defineConfig({
       vue: "vue/dist/vue.esm-bundler.js"
     },
     dedupe: ['vue'],
+  },
+  server: {
+    watch: {
+      usePolling: true
+    }
   }
 });