css - How to render HTML coming out of TinyMCE with proper stylesheets in my own frontend?

Question

Having a TinyMCE-Editor, it gives me as output proper html tags like h1, h2, b, ul, ol, li. Like this:

However, when I want to render exactly the output of TinyMCE in my own frontend, which is consisting of TailWindCSS or Bootstrap, every style of every html-tag looks very plain with same size, same margin, same padding, as it would be in a normal text-element.

I found out, that these CSS-frameworks use something like "normalize-css" to achieve this look. However, how can I restore the CSS-styles of TinyMCE in my frontend although I am using Tailwind and/or BootstrapCSS?

Answer 1

Talwind Preflight is responsible for this. Preflight removes all the margins, paddings and every set of base styles.

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

You can disable it

// tailwind.config.js
module.exports = {
  corePlugins: {
   preflight: false,
  }
}

Once disabled, html tags like h1, h2, b, ul, ol, li will be rendered properly.