How to display innerHtml in nextjs (having tailwind)

Question

I have generated a rich-text using a ckedtor in laravel and fetched it to nextjs for display. I have used:

    <div dangerouslySetInnerHTML={{ __html: htmlString }} />

and: ReactHtmlParser(htmlString) but None outputs the texts as it appears in laravel backend, actually its missing the styling (i.e: bold, font-size, bulleting, link-color and numbering. How can display this richtext in nextjs? Kindly help.

Answer 1

The problem is with Tailwindcss, it overrides all the styles and resets them.

There is a plugin you can use to fix that. install it:

npm install -D @tailwindcss/typography

update your tailwind.config.js

module.exports = {
    theme: {
       // ...
    },
    plugins: [
       require('@tailwindcss/typography'),
       // ...
    ],
}

then give className="prose" to your rich text editor div

for more information you can visit this link