How to prevent css libraries like tailwindcss and bootstrap to effect wysiwyg editor's html content (like Tinymce,Ckeditor)?

I use @layer of tailwindcss to define base, like this:

// tailwind.scss
@tailwind base;

@layer base {
  // define revert css here
  .no-tailwindcss-base {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-size: revert;
      font-weight: revert;
    }

    ol,
    ul {
      list-style: revert;
      margin: revert;
      padding: revert;
    }
  }
}

@tailwind components;
@tailwind utilities;

Then you can set a className that you defined on your render element. Like this:

<div class="no-tailwindcss-base" />

Well, I must say, my answer won't be very different from the answer given by Zhongxu. The thing is, I am not familiar with @layer directive, and the provided answer was essentially not working for me. Therefore, I'll leave below the CSS styles that I've come up with to solve the mystery, but the credit goes to @Zhongxu:

@tailwind base;

@layer base {

    .no-tailwindcss-base h1,
    .no-tailwindcss-base h2,
    .no-tailwindcss-base h3,
    .no-tailwindcss-base h4,
    .no-tailwindcss-base h5,
    .no-tailwindcss-base h6 {
        font-size: revert;
        font-weight: revert;
    }

    .no-tailwindcss-base ol,
    .no-tailwindcss-base ul {
        list-style: revert;
        margin: revert;
        padding: revert;
    }
}

@tailwind components;
@tailwind utilities;

<div class="no-tailwindcss-base">
   <!-- Other elements here-->
</div>

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.

The "unreset" approach from swyx worked for me ( https://gist.github.com/sw-yx/28c25962485101ca291ec1947b9d0b3e )

1. Paste in the unrest class into your css (or have mix build it in)
2. Put the html from TinyMCE into a div and use the unrest class

<div class="unreset">
    {!! $tinyMCEhtmloutput !!}
</div>

// i think this must work... hopefully.. @tailwind base;

@layer base {

no-tailwindcss-base{

h1,
h2,
h3,
h4,
h5,
h6`enter code here`{
  list-style: revert;
  margin: revert;
  padding: revert;
}

} }

@tailwind components; @tailwind utilities;