style: markdown styling using tailwind typography prose

osmkerala · Nov 14, 2023 · c16bc4d · c16bc4d
1 parent f616a5c
commit c16bc4d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -4,5 +4,7 @@ module.exports = {
 	theme: {
 		extend: {},
 	},
-	plugins: [],
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
 }