From d6eb68a268b36fdff149013b538d8bb844434c56 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sat, 8 Nov 2025 11:49:53 +0800
Subject: [PATCH] :bug: Fix the styling conflict between vuetify and
 tailwindcss

---
 app/assets/css/components.scss |  3 +++
 app/assets/css/globals.scss    |  3 +++
 app/assets/css/main.css        | 15 ++++++++++++++-
 app/layouts/default.vue        |  2 +-
 nuxt.config.ts                 | 15 ++++++++++++++-
 package.json                   | 15 ++++++++-------
 6 files changed, 43 insertions(+), 10 deletions(-)
 create mode 100644 app/assets/css/components.scss
 create mode 100644 app/assets/css/globals.scss

diff --git a/app/assets/css/components.scss b/app/assets/css/components.scss
new file mode 100644
index 0000000..b530e52
--- /dev/null
+++ b/app/assets/css/components.scss
@@ -0,0 +1,3 @@
+@forward "vuetify/settings" with (
+  $layers: true
+);
diff --git a/app/assets/css/globals.scss b/app/assets/css/globals.scss
new file mode 100644
index 0000000..ba14c9a
--- /dev/null
+++ b/app/assets/css/globals.scss
@@ -0,0 +1,3 @@
+@use "vuetify" with (
+  $reset: false
+);
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 4c337a9..986f83c 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -4,6 +4,19 @@
   :root {
     --font-family: "Nunito Variable", "Helvatica", sans-serif;
   }
+
+  .prose p,
+  .prose h1,
+  .prose h2,
+  .prose h3,
+  .prose h4,
+  .prose h5,
+  .prose h6,
+  .prose ul,
+  .prose ol,
+  .prose blockquote {
+    margin: revert;
+  }
 }
 
 @plugin "@tailwindcss/typography";
@@ -29,4 +42,4 @@ body {
 .page-leave-to {
   opacity: 0;
   filter: blur(1rem);
-}
\ No newline at end of file
+}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 4e45f5b..9a86f42 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app :theme="colorMode.preference">
     <v-app-bar elevation="2" color="surface-lighten-5">
-      <v-container class="mx-auto d-flex align-center justify-center">
+      <v-container class="mx-auto flex align-center justify-center">
         <img
           :src="colorMode.value == 'dark' ? IconDark : IconLight"
           width="32"
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 91411b7..3fed8da 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -13,7 +13,11 @@ export default defineNuxtConfig({
     "@nuxtjs/color-mode",
     "nuxt-og-image"
   ],
-  css: ["~/assets/css/main.css", "katex/dist/katex.min.css"],
+  css: [
+    "~/assets/css/main.css",
+    "~/assets/css/globals.scss",
+    "katex/dist/katex.min.css"
+  ],
   app: {
     pageTransition: { name: "page", mode: "out-in" },
     head: {
@@ -64,5 +68,14 @@ export default defineNuxtConfig({
   },
   vite: {
     plugins: [tailwindcss()]
+  },
+  vuetify: {
+    moduleOptions: {
+      disableVuetifyStyles: true,
+      styles: {
+        configFile: "assets/css/components.scss"
+      }
+    },
+    vuetifyOptions: "./vuetify.config.ts"
   }
 })
diff --git a/package.json b/package.json
index 4b0361f..21f9bfe 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@nuxtjs/i18n": "10.1.0",
     "@pinia/nuxt": "0.11.2",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.17",
     "@vueuse/core": "^13.9.0",
     "blurhash": "^2.0.5",
     "cfturnstile-vue3": "^2.0.0",
@@ -31,21 +31,22 @@
     "markdown-exit": "^1.0.0-beta.6",
     "markdown-it-highlightjs": "^4.2.0",
     "markdown-it-texmath": "^1.0.0",
-    "nuxt": "^4.2.0",
+    "nuxt": "^4.2.1",
     "nuxt-og-image": "^5.1.12",
-    "pinia": "^3.0.3",
-    "sharp": "^0.34.4",
+    "pinia": "^3.0.4",
+    "sharp": "^0.34.5",
     "swagger-themes": "^1.4.3",
     "swagger-ui-dist": "^5.30.2",
-    "tailwindcss": "^4.1.16",
+    "tailwindcss": "^4.1.17",
     "tus-js-client": "^4.3.1",
-    "vue": "^3.5.22",
+    "vue": "^3.5.24",
     "vue-router": "^4.6.3",
     "vuetify-nuxt-module": "0.18.7"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
     "@types/luxon": "^3.7.1",
-    "@types/node": "^24.10.0"
+    "@types/node": "^24.10.0",
+    "sass-embedded": "^1.93.3"
   }
 }