Tailwind CSS partially working in NextJS app

I am creating a NextJS Blog. Tailwind CSS is working properly except in the following case.

export default async function PostPage({ params }) {
  ...
  const tags = post.data.tags.split(',').map(tag => `<span className="bg-red-600 m-2">${tag}</span>`).join('').toString(); // post.data.tags = "abc, pqr, xyz"
  return (
    <>
      <h1 className="text-3xl mt-4 mb-0">{post.data.title}</h1>
      <p dangerouslySetInnerHTML={{ __html: tags }} />
    </>
  )
}

If you see at the span element, it has some CSS. It’s not working. However, h1 is working fine. If I add some css to p element, it works as well. I am new to NextJS. How to solve this?

>Solution :

Instead of className="bg-red-600 m-2", use class="bg-red-600 m-2"

className is used for React, not raw HTML which you are using inside dangerouslySetInnerHTML

dangerouslySetInnerHTML: An object of the form { __html: ‘<p>some
html</p>’ } with a raw HTML string inside.

Source: https://react.dev/reference/react-dom/components/common#common-props