i need to render some styled jsx tags in my ponent 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 ponenets:

<div className="p-10">
<div
   dangerouslySetInnerHTML={{
      __html: t('about-text'),
    }}
   />
</div>

i need to render some styled jsx tags in my ponent 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 ponenets:

<div className="p-10">
<div
   dangerouslySetInnerHTML={{
      __html: t('about-text'),
    }}
   />
</div>

• javascript
• reactjs
• next.js
• i18next

Share Improve this question Follow edited Jan 24, 2022 at 16:58 Escanor asked Jan 24, 2022 at 16:54 EscanorEscanor 9533 silver badges1010 bronze badges 2

• 2 Will the JSON file you've shown here be matched by the paths that you have provided to content in Tailwind's configuration? If not, Tailwind won't pile those classes (assuming they're not used anywhere else). – George Commented Jan 24, 2022 at 16:57
• Could it be because about-text contains broken html? – spender Commented Jan 24, 2022 at 16:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.

This is an example of a tag that worked for me, using Tailwind:

<a class="hover:text-blue-600" href="some youtube link" target="_blank">https://.</a>

Just use "class" instead of "className" for the dangerouslySetInnerHTML CSS class.