React Markdown not displaying ordered list

Question

I am using React ReactMarkdown to display a string which have numbered lists in it , the string is fetched using an api. But the it succesfully arranges the string line by line according to lists but it fails to display the numbers.

import React, { useEffect, useRef } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

const Chat = ({ messages }) => {

  const messageContainerRef = useRef(null);
  useEffect(() => {
    if (messageContainerRef.current) {
      messageContainerRef.current.scrollTop =
        messageContainerRef.current.scrollHeight;
    }
  }),
    [messages];
  return (
    <div
      className="w-full md:w-[50%] text-start overflow-y-scroll max-h-full"
      ref={messageContainerRef}
    >
      <div className="flex flex-col gap-8 items-start">
        {messages.length > 0 ? (
          messages.map((message, index) => (
            <div
              className="text-white flex gap-3 items-start justify-center"
              key={index}
            >
              {message.role == "user" ? (
                <div className="w-7 h-7 rounded-2xl text-white text-center bg-[#3e3e54] border border-gray-50">
                  U
                </div>
              ) : (
                <img
                  src="/img/doge.webp"
                  alt=""
                  className="w-7 h-7 rounded-2xl"
                />
              )}
              <div>
                <h1 className="font-bold ">
                  {message.role == "user" ? "You" : "VoiceGPT"}
                </h1>
                {message.role == "user" ? (
                  <p>{message.content}</p>
                ) : (
                  <ReactMarkdown remarkPlugins={[remarkGfm]}>
                    {message.content}
                  </ReactMarkdown>
                )}
              </div>
            </div>
          ))
        ) : (
          <>
            <button></button>
          </>
        )}
      </div>
    </div>
  );
};

export default Chat;

Result i got

Develop a plan

Make a list of tasks

Prioritize tasks

Start working on the first task

Complete the task

Evaluate progress

Adjust plan if necessary

Move on to the next task

Repeat steps 5-8 until all tasks are completed

Celebrate your accomplishments!

expected result

1. Develop a plan
2. Make a list of tasks
3. Prioritize tasks
4. Start working on the first task
5. Complete the task
6. Evaluate progress
7. Adjust plan if necessary
8. Move on to the next task
9. Repeat steps 5-8 until all tasks are completed
10. Celebrate your accomplishments!

I tried installing and using remarkGfm , but that doesnt seems to work.

Answer 1

The problem here is that React-markdown map the markdown text to real html elements, and you're using tailwindcss.

reference link https://stackoverflow.com/questions/74607419/react-markdown-don%C2%B4t-render-markdown#:~:text=The%20problem%20here%20is%20that%20React%2Dmarkdown%20map%20the%20markdown%20text%20to%20real%20html%20elements%2C%20and%20you%27re%20using%20tailwindcss.

i added the following code to my index.css

ol {
  list-style: decimal;
  padding-left: 2rem;
}