We have integrated Sanity, Next.js, and Tailwind CSS into our current project. Recently, a field named 'raw_html' has been added to the Sanity content, which includes some HTML code along with sample data.
<div class="p-4 bg-gray-100 rounded-lg">
<h1 class="text-3xl font-bold mb-4">Hello World</h1>
<p class="mb-2">This is a paragraph with <span class="text-blue-500">Tailwind CSS</span> classes.</p>
<ul class="list-disc ml-5">
<li class="mb-1">First item</li>
<li class="mb-1">Second item</li>
<li class="mb-1">Third item</li>
</ul>
</div>
However, there seems to be an issue with displaying this content on the frontend. The HTML appears fine when directly embedded into the code. Are there any specific reasons for this discrepancy or possible solutions? Thank you in advance.
Provided below is the code snippet:
import { useSite } from '@/app/contexts/SiteContext'; // Make sure the import is correct
function Header() {
const site = useSite();
if (!site) return <div>Loading...</div>;
return (
<div className="m-10">
<div className="text-center text-red-500">Tailwind CSS is working!</div>
<div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: site.header.templateDetails.raw_html }} />
</div>
);
}
export default Header;