feat: switch to unocss

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+  <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
     <router-view />
     <Footer />
   </main>

src/components/Footer.vue

@@ -3,14 +3,19 @@ import { isDark, toggleDark } from '~/logic'
 </script>
 
 <template>
-  <nav class="text-xl mt-6">
-    <button class="icon-btn mx-2 !outline-none" @click="toggleDark">
-      <carbon-moon v-if="isDark" />
-      <carbon-sun v-else />
+  <nav text-xl mt-6 inline-flex gap-2>
+    <button class="icon-btn !outline-none" @click="toggleDark()">
+      <div v-if="isDark" i-carbon-moon />
+      <div v-else i-carbon-sun />
     </button>
 
-    <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse-lite" target="_blank" title="GitHub">
-      <carbon-logo-github />
-    </a>
+    <a
+      class="icon-btn"
+      i-carbon-logo-github
+      rel="noreferrer"
+      href="https://github.com/antfu/vitesse-lite"
+      target="_blank"
+      title="GitHub"
+    />
   </nav>
 </template>

src/main.ts

@@ -4,11 +4,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 import routes from 'virtual:generated-pages'
 import App from './App.vue'
 
-// windicss layers
-import 'virtual:windi-base.css'
-import 'virtual:windi-components.css'
+import '@unocss/reset/tailwind.css'
 import './styles/main.css'
-import 'virtual:windi-utilities.css'
+import 'uno.css'
 
 const app = createApp(App)
 const router = createRouter({

src/pages/hi/[name].vue

@@ -5,13 +5,11 @@ const router = useRouter()
 
 <template>
   <div>
-    <p class="text-4xl">
-      <carbon-pedestrian class="inline-block" />
-    </p>
+    <div i-carbon-pedestrian text-4xl inline-block />
     <p>
       Hi, {{ props.name }}
     </p>
-    <p class="text-sm opacity-50">
+    <p text-sm op50>
       <em>Dynamic route!</em>
     </p>
 

src/pages/index.vue

@@ -10,19 +10,17 @@ const go = () => {
 
 <template>
   <div>
-    <p class="text-4xl">
-      <carbon-campsite class="inline-block" />
-    </p>
+    <div i-carbon-campsite text-4xl inline-block />
     <p>
       <a rel="noreferrer" href="https://github.com/antfu/vitesse-lite" target="_blank">
         Vitesse Lite
       </a>
     </p>
     <p>
-      <em class="text-sm opacity-75">Opinionated Vite Starter Template</em>
+      <em text-sm op75>Opinionated Vite Starter Template</em>
     </p>
 
-    <div class="py-4" />
+    <div py-4 />
 
     <input
       id="input"

src/styles/main.css

@@ -10,6 +10,7 @@ html.dark {
   background: #121212;
 }
 
+/* 
 .btn {
   @apply px-4 py-1 rounded inline-block
     bg-teal-600 text-white cursor-pointer
@@ -22,4 +23,4 @@ html.dark {
     opacity-75 transition duration-200 ease-in-out
     hover:opacity-100 hover:text-teal-600;
   font-size: 0.9em;
-}
+} */