replace tailwind with unocss

Author: beeequeue

app/app.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtPwaManifest />
 
-  <main class="h-1/1 flex items-center justify-center p-5 text-center -mt-2 md:mt-0">
+  <main class="h-1/1 -mt-2 flex items-center justify-center p-5 text-center md:mt-0">
     <BackgroundImage />
 
     <Content v-if="patch != null" />

app/components/bottom-bar/discord-link.vue

@@ -1,6 +1,6 @@
 <template>
   <Clickable is="a" :href="url" rel="noopener" class="m-2px flex items-center p-2">
-    <Icon name="simple-icons:discord" class="mr-2 fill-gray-100" />
+    <i class="i-simple-icons:discord mr-2 fill-gray-100" />
 
     Get notified in Discord
   </Clickable>

app/components/bottom-bar/github-link.vue

@@ -6,7 +6,7 @@
     target="_blank"
     class="m-2px flex items-center p-2"
   >
-    <Icon name="simple-icons:github" class="mr-2 fill-gray-100" />
+    <div class="i-simple-icons:github mr-2 fill-gray-100" />
 
     Source code
   </Clickable>

app/components/bottom-bar/notifications.client.vue

@@ -6,10 +6,9 @@
     class="text-base"
     @change="handleChange"
   >
-    <Icon
+    <div
       class="animate-infinite animate-slow mr-2 transition-all hover:fill-gray-100"
       :class="iconClasses"
-      :name="subscribed ? 'tabler:bell-off' : 'tabler:bell-filled'"
     />
 
     {{ subscribed ? "Disable" : "Enable" }} push notifications
@@ -27,6 +26,8 @@ const iconClasses = computed(() => ({
   "grayed-out": !supported || loading.value,
   "fill-gray-400": !subscribed.value,
   shine: subscribed.value,
+  "i-tabler:bell-off": subscribed,
+  "i-tabler:bell-filled": !subscribed,
 }))
 
 const handleChange = () => {

nuxt.config.ts

@@ -5,6 +5,7 @@ import browserslist from "browserslist"
 import { resolveToEsbuildTarget } from "esbuild-plugin-browserslist"
 import { defineNuxtConfig } from "nuxt/config"
 import type SecurityModule from "nuxt-security"
+import directives from "@unocss/transformer-directives"
 
 import type { ModuleOptions, NuxtModule } from "@nuxt/schema"
 
@@ -49,13 +50,12 @@ export default defineNuxtConfig({
 
   modules: [
     "@nuxt/eslint",
-    "@nuxt/icon",
     "@nuxtjs/google-fonts",
     "@nuxtjs/supabase",
     "@vite-pwa/nuxt",
     "@vueuse/nuxt",
     "nuxt-security",
-    "nuxt-windicss",
+    "@unocss/nuxt",
     "@morev/vue-transitions/nuxt",
   ],
 
@@ -81,7 +81,14 @@ export default defineNuxtConfig({
     },
   },
 
-  css: ["virtual:windi.css", "assets/base.css"],
+  css: ["assets/base.css"],
+  unocss: {
+    icons: true,
+    wind: true,
+    webFonts: true,
+    preflight: true,
+    transformers: [directives()],
+  },
 
   app: {
     head: {

package.json

@@ -43,24 +43,23 @@
     "@iconify-json/tabler": "1.2.18",
     "@morev/vue-transitions": "3.0.5",
     "@nuxt/eslint": "1.4.1",
-    "@nuxt/icon": "1.13.0",
     "@nuxtjs/google-fonts": "3.2.0",
     "@nuxtjs/supabase": "1.5.1",
     "@supabase/realtime-js": "2.11.9",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/canvas-confetti": "1.9.0",
     "@types/node": "22.15.29",
+    "@unocss/nuxt": "66.1.3",
+    "@unocss/reset": "66.1.3",
     "@vite-pwa/nuxt": "1.0.3",
     "@vueuse/nuxt": "13.3.0",
-    "@windicss/plugin-animations": "1.0.9",
     "browserslist": "4.25.0",
     "dotenv": "16.5.0",
     "esbuild-plugin-browserslist": "1.0.1",
     "eslint": "9.28.0",
     "nano-staged": "0.8.0",
     "nuxt": "4.0.0-alpha.1",
     "nuxt-security": "2.2.0",
-    "nuxt-windicss": "3.0.1",
     "ofetch": "1.4.1",
     "pino-http": "10.4.0",
     "pino-pretty": "13.0.0",

patches/@unocss__nuxt.patch

@@ -0,0 +1,27 @@
+diff --git a/dist/index.mjs b/dist/index.mjs
+index cb6792065a7d6929987fe34d08f3942698a3dd02..35312a0d3cb014a33fb46557b0cd5fbf6be5a4c9 100644
+--- a/dist/index.mjs
++++ b/dist/index.mjs
+@@ -1,10 +1,9 @@
+ import { dirname, resolve } from 'node:path';
+ import process from 'node:process';
+ import { fileURLToPath } from 'node:url';
+-import { defineNuxtModule, addPluginTemplate, isNuxt2, addComponentsDir, addTemplate, findPath, isNuxt3, extendViteConfig, extendWebpackConfig } from '@nuxt/kit';
++import { defineNuxtModule, addPluginTemplate, isNuxt2, addComponentsDir, addTemplate, findPath, isNuxt3, extendViteConfig } from '@nuxt/kit';
+ import { createRecoveryConfigLoader } from '@unocss/config';
+ import VitePlugin from '@unocss/vite';
+-import WebpackPlugin from '@unocss/webpack';
+ import { cssIdRE } from '@unocss/core';
+ import presetAttributify from '@unocss/preset-attributify';
+ import presetIcons from '@unocss/preset-icons';
+@@ -134,10 +133,6 @@ export default mergeConfigs([${configPaths.map((_, index) => `cfg${index}`).join
+           mode: options.mode
+         }, unoConfig));
+       });
+-      extendWebpackConfig(async (config) => {
+-        config.plugins = config.plugins || [];
+-        config.plugins.unshift(WebpackPlugin({}, unoConfig));
+-      });
+     });
+     if (nuxt.options.dev) {
+       nuxt.hook("devtools:customTabs", (tabs) => {