🐛 Fix the styling conflict between vuetify and tailwindcss

app/assets/css/components.scss

@@ -0,0 +1,3 @@
+@forward "vuetify/settings" with (
+  $layers: true
+);

app/assets/css/globals.scss

@@ -0,0 +1,3 @@
+@use "vuetify" with (
+  $reset: false
+);

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";

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"

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"
   }
 })

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"
   }
 }