feat: Style MDSveX and wrap with layout

Author: chrisjm

postcss.config.cjs

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/app.css

@@ -1,3 +1,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.markdown {
+  h1 {
+    @apply text-4xl my-4;
+  }
+
+  p {
+    @apply mt-2;
+  }
+
+  a {
+    @apply text-amber-700 underline;
+  }
+
+  a:hover {
+    @apply text-amber-900;
+  }
+
+  a:active {
+    @apply text-amber-600;
+  }
+}

src/layouts/MarkdownLayout.svelte

@@ -0,0 +1,3 @@
+<div class="markdown">
+  <slot />
+</div>

svelte.config.js

@@ -88,7 +88,12 @@ const config = {
   // See the available options at https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md
 
   // options passed to svelte.preprocess (https://svelte.dev/docs#compile-time-svelte-preprocess)
-  preprocess: [mdsvex(), sveltePreprocess()],
+  preprocess: [
+    mdsvex({
+      layout: "./src/layouts/MarkdownLayout.svelte",
+    }),
+    sveltePreprocess(),
+  ],
 };
 
 export default config;