Add @tailwindcss/typography plugin and update package-lock.json

Author: gptkong

package-lock.json

@@ -30,6 +30,7 @@
     "tailwindcss": "^4.1.8"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.16",
     "tw-animate-css": "^1.3.4"
   }
 }

package.json

@@ -91,32 +91,3 @@ const { title, description, pubDate, updatedDate, heroImage, tags } =
     <Footer />
   </body>
 </html>
-
-<style>
-  .prose {
-    max-width: 65ch;
-    margin: 0 auto;
-  }
-  .prose img {
-    margin: 2rem auto;
-    border-radius: 0.5rem;
-  }
-  .prose pre {
-    background-color: #1a1a1a;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    overflow-x: auto;
-  }
-  .prose code {
-    background-color: #f3f4f6;
-    padding: 0.2rem 0.4rem;
-    border-radius: 0.25rem;
-    font-size: 0.875em;
-  }
-  .prose pre code {
-    background-color: transparent;
-    padding: 0;
-    border-radius: 0;
-    font-size: 0.9em;
-  }
-</style>

src/layouts/BlogPost.astro

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));