Rendering string HTML to next.js page.
Unanswered
Pond loach posted this in #help-forum
Pond loachOP
Hey, I am making a blog system where I use the quill text editor to generate the html content which is stored in the database. When the page for that blog is loaded, it should just display the html content. It does, but the different tags are not displayed properly, so the h1 tags just display as normal text.
Code: https://pastebin.com/ZucKTKxw
blogPost.blog.content returns:
Any help and other tips are appreciated
Code: https://pastebin.com/ZucKTKxw
blogPost.blog.content returns:
<h1>This is a test blog</h1><p><br></p><p>I am using diffrent styles <strong>Bold </strong><em>Dsadsas </em><u>Underline </u><s>Strikethrough </s></p><p><br></p><blockquote>Indent</blockquote><p>dsaasd</p><p><br></p><ul><li>adssaddsa</li><li>dsaasddsa</li><li>sdasadsad</li></ul><p><a href="https://www.npmjs.com/package/react-quill" rel="noopener noreferrer" target="_blank">https://www.npmjs.com/package/react-quill</a></p><p><br></p>Any help and other tips are appreciated
5 Replies
Are you using tailwind css? If so, tailwind has this Preflight which basically removes default element styles, h1 to h6 are affected as well, hence why h1 is displayed as a regular text. You can check this link for better explanation https://tailwindcss.com/docs/preflight
You might need to do something like this instead <h1 className='text-xl'> Hellow World </h1>
@Berlim Are you using tailwind css? If so, tailwind has this Preflight which basically removes default element styles, h1 to h6 are affected as well, hence why h1 is displayed as a regular text. You can check this link for better explanation https://tailwindcss.com/docs/preflight
Pond loachOP
Thanks for the info! Is there a way I can keep the preflight but still use normal values?
You can head over the extend preflight section here and set the the properties of the tags to what you want. Like setting h1 to text-2xl