i need to render some styled jsx tags in my component by using useTranslation hook and dangerouslySetInnerHTML, those tags are stored in a json file , i found that dangerouslySetInnerHTML work's fine but don't apply tailwind styles for each tag,
json file:
{
"about-text":"<div className='text-blue px-5'><p>Text ...</p</div>",
}
inside componenets:
<div className="p-10">
<div
dangerouslySetInnerHTML={{
__html: t('about-text'),
}}
/>
</div>
dangerouslySetInnerHTML expects to be passed a string of HTML, not a string of JSX.
The class attribute is used directly. You can't adjust the className property instead.