From c16bc4dfcf8855d7edeb5329da33c15ab4b56a77 Mon Sep 17 00:00:00 2001
From: Akshay S Dinesh <akshay@learnlearn.in>
Date: Tue, 14 Nov 2023 23:51:34 +0530
Subject: [PATCH] style: markdown styling using tailwind typography prose

---
 src/layouts/BlogPostLayout.astro | 12 +++++++-----
 tailwind.config.cjs              |  4 +++-
 2 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index 09cfee36..04d876e2 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -14,17 +14,19 @@ import Navbar from '../components/navbar.jsx';
   <meta name="generator" content={Astro.generator} />
   <title>{frontmatter.title}</title> <!-- You can include the title from frontmatter -->
 </head>
-<body>
+<body class="dark:bg-slate-800">
   <Navbar client:load />
   <div class="m-2 p-2">
     <h1 class="text-3xl font-bold">{frontmatter.title}</h1>
     <p class="text-lg font-bold">{frontmatter.description}</p>
     <h3 class="text-md font-semibold">Author: {frontmatter.author}</h3>
     <hr class="border-black my-4" />
-    <div class="p-2 m-2"> <!-- Applies default styles for Markdown content -->
-      <!-- Markdown content is injected here -->
-      <slot>
-      </slot>
+    <div
+      class="m-2 p-2 prose lg:prose-xl dark:prose-invert
+      prose-h1:font-bold prose-h1:text-xl
+      prose-a:text-blue-600 prose-p:text-justify prose-img:rounded-xl"
+    >
+      <slot />
     </div>
   </div>
   <Footer />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f5368a76..7868cfb6 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -4,5 +4,7 @@ module.exports = {
 	theme: {
 		extend: {},
 	},
-	plugins: [],
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
 }
