fix: twikoo bg-color conflict with tailwindcss reset, close #255

packages/valaxy/client/main.ts

@@ -1,10 +1,16 @@
+import type { ViteSSGContext } from 'vite-ssg'
 import { ViteSSG } from 'vite-ssg'
 import generatedRoutes from 'virtual:generated-pages'
 import { setupLayouts } from 'virtual:generated-layouts'
+import AppLink from './components/AppLink.vue'
+
 import App from './App.vue'
-import AppLinkVue from './components/AppLink.vue'
 
-import '@unocss/reset/tailwind.css'
+// reset styles
+// import '@unocss/reset/tailwind.css'
+// https://unocss.dev/guide/style-reset#tailwind-compat
+// minus the background color override for buttons to avoid conflicts with UI frameworks
+import '@unocss/reset/tailwind-compat.css'
 
 // generate user styles
 import '/@valaxyjs/styles'
@@ -18,6 +24,14 @@ const routes = setupLayouts(import.meta.env.DEV
     i.meta && i.meta.frontmatter && !i.meta.frontmatter.draft,
   ))
 
+/**
+ * register global components
+ * @param ctx
+ */
+export function registerComponents(ctx: ViteSSGContext) {
+  ctx.app.component('AppLink', AppLink)
+}
+
 // not filter hide for ssg
 
 // https://github.com/antfu/vite-ssg
@@ -32,7 +46,7 @@ export const createApp = ViteSSG(
     },
   },
   (ctx) => {
-    ctx.app.component('AppLink', AppLinkVue)
+    registerComponents(ctx)
     setupMain(ctx)
   },
 )