Blog styles

package.json

@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.44.1",
+    "@tailwindcss/typography": "^0.5.13",
     "@types/node": "^20.14.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",

src/pages/blog/sections/BlogBody.jsx

@@ -7,23 +7,23 @@ import { glovo } from "../../../assets/images/blogs-page";
 import NextRead from "./NextRead";
 import RelatedBlogs from "./RelatedBlogs";
 
-import "./blogBody.css";
-
 function BlogBody({ id, categoryId, blogBody }) {
   const BodyRef = useRef(null);
 
   useEffect(() => {
     if (BodyRef.current) {
-      BodyRef.current.innerHTML += blogBody ?? "";
+      BodyRef.current.innerHTML = blogBody ?? "";
     }
   }, [blogBody]);
 
   return (
     <div className="flex flex-col md:flex-row gap-5 w-full pb-8 px-3">
       <div className="w-full md:w-[70%] flex flex-col gap-5">
         <div className="container text-[13px] md:text-base font-normal text-[#323433]">
-          <div ref={BodyRef} className="blog-content" />
-
+          <div
+            ref={BodyRef}
+            className="prose-md text-gray-900 prose prose-a:no-underline prose-li:marker:text-[#333] prose-li:marker:text-sm prose-a:text-[#009975] first-letter:font-bold first-letter:text-5xl first-letter:uppercase"
+          />
           {/* <Advert /> */}
         </div>
         {/* read next */}

tailwind.config.js

@@ -74,5 +74,9 @@ module.exports = {
     },
   },
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
-  plugins: [require("tailwind-scrollbar-hide"), require("tailwindcss-animate")],
+  plugins: [
+    require("tailwind-scrollbar-hide"),
+    require("tailwindcss-animate"),
+    require("@tailwindcss/typography"),
+  ],
 };