🐛 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";
@@ -29,4 +42,4 @@ body {
 .page-leave-to {
   opacity: 0;
   filter: blur(1rem);
-}
+}

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"