What steps can be taken to limit the impact of CSS frameworks such as tailwindcss and bootstrap on the HTML content of wysiwyg editors such as Tinymce and Ckeditor?

Question

What steps can be taken to limit the impact of CSS frameworks such as tailwindcss and bootstrap on the HTML content of wysiwyg editors such as Tinymce and Ckeditor?

When working with a TinyMCE editor, I have noticed that the output includes proper HTML tags such as h1, h2, b, ul, ol, li. However, when trying to display this output using TailWindCSS or Bootstrap on my own frontend, all the styles for each HTML tag appear very basic with uniform size, margin, and padding like regular text elements.

I have learned that these CSS frameworks utilize something similar to "normalize-css" to achieve this consistent look. But how can I preserve the unique CSS styles from TinyMCE in my frontend while still using Tailwind and/or BootstrapCSS?

html css bootstrap-4 tinymce tailwind-css

Answer 1

Answer №1

I utilize the @layer feature in tailwindcss to establish a base style, as shown below:

// tailwind.scss
@tailwind base;

@layer base {
  // custom revert css styles 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;

After defining the className, you can apply it to your HTML element like this:

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

Answer 2

I utilize the @layer feature in tailwindcss to establish a base style, as shown below:

// tailwind.scss
@tailwind base;

@layer base {
  // custom revert css styles 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;

After defining the className, you can apply it to your HTML element like this:

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

Answer 3

Answer №2

It seems that my approach aligns closely with Zhongxu's response regarding the @layer directive. However, as I am not well-versed in this directive, the solution provided did not quite work for me. Thus, I have devised my own CSS styles to unravel the issue, though credit is due 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>

Answer 4

It seems that my approach aligns closely with Zhongxu's response regarding the @layer directive. However, as I am not well-versed in this directive, the solution provided did not quite work for me. Thus, I have devised my own CSS styles to unravel the issue, though credit is due 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>

Answer 5

Answer №3

Here is a small tweak to @TheFaultInOurStars' solution, streamlining the code and applying no-tailwindcss-base to all child elements.

@layer base {
    .no-tailwindcss-base, .no-tailwindcss-base * , .no-tailwindcss-base > * {
        font-size: revert;
        font-weight: revert;
        margin: revert;
        display: revert;
        vertical-align: revert;
        max-width: revert;
        height: revert;
        border-width: revert;
        border-style: revert;
        border-color: revert;
        outline: revert;
        list-style: revert;
        padding: revert;
    }
}

Answer 6

Here is a small tweak to @TheFaultInOurStars' solution, streamlining the code and applying no-tailwindcss-base to all child elements.

@layer base {
    .no-tailwindcss-base, .no-tailwindcss-base * , .no-tailwindcss-base > * {
        font-size: revert;
        font-weight: revert;
        margin: revert;
        display: revert;
        vertical-align: revert;
        max-width: revert;
        height: revert;
        border-width: revert;
        border-style: revert;
        border-color: revert;
        outline: revert;
        list-style: revert;
        padding: revert;
    }
}

Answer 7

Answer №4

Tailwind Preflight is the culprit here. This feature removes all margins, paddings, and any base styles that are set.

@tailwind base; /* Preflight will inject its styles here */

@tailwind components;

@tailwind utilities;

If you wish to disable it

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

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

Answer 8

Tailwind Preflight is the culprit here. This feature removes all margins, paddings, and any base styles that are set.

@tailwind base; /* Preflight will inject its styles here */

@tailwind components;

@tailwind utilities;

If you wish to disable it

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

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

Answer 9

Answer №5

Using the "unreset" method suggested by swyx proved to be effective for me (https://gist.github.com/sw-yx/28c25962485101ca291ec1947b9d0b3e)

Include the unreset class in your CSS or let it be generated by a build tool
Wrap the TinyMCE-generated HTML within a div and apply the unreset class

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

Answer 10

Using the "unreset" method suggested by swyx proved to be effective for me (https://gist.github.com/sw-yx/28c25962485101ca291ec1947b9d0b3e)

Include the unreset class in your CSS or let it be generated by a build tool
Wrap the TinyMCE-generated HTML within a div and apply the unreset class

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

Answer 11

Answer №6

After facing the same issue, I managed to discover a solution that perfectly suits my needs. Utilizing tailwind css alongside the django summernote editor (compatible with any editor), I made a simple tweak in my HTML template file by adding only disc bullets for unordered lists:

<style> ul{   list-style-type: disc; } </style>

While this approach may not be ideal for those looking to display numbered lists or roman numerals, it served my purpose effectively without having to dive into complex root files or configuration setups. Sometimes simplicity trumps all. Cheers!

Answer 12

After facing the same issue, I managed to discover a solution that perfectly suits my needs. Utilizing tailwind css alongside the django summernote editor (compatible with any editor), I made a simple tweak in my HTML template file by adding only disc bullets for unordered lists:

<style> ul{   list-style-type: disc; } </style>

While this approach may not be ideal for those looking to display numbered lists or roman numerals, it served my purpose effectively without having to dive into complex root files or configuration setups. Sometimes simplicity trumps all. Cheers!

Answer 13

Answer №7

When working with tailwindcss, you have the option of utilizing the typography-plugin. To make use of this feature, simply incorporate the prose class like so:

<article class="prose lg:prose-xl">
  <h1>The benefits of drinking green tea daily</h1>
  <!-- ... -->
</article>

Answer 14

When working with tailwindcss, you have the option of utilizing the typography-plugin. To make use of this feature, simply incorporate the prose class like so:

<article class="prose lg:prose-xl">
  <h1>The benefits of drinking green tea daily</h1>
  <!-- ... -->
</article>

Answer 15

Answer №8

// Trying to make this work, fingers crossed... @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;

Answer 16

// Trying to make this work, fingers crossed... @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;

What steps can be taken to limit the impact of CSS frameworks such as tailwindcss and bootstrap on the HTML content of wysiwyg editors such as Tinymce and Ckeditor?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

The content does not fill the entire page's height

Creating a for loop using jQuery to append the value of [i] to the string "id" for the element

Exploring reviews with an innovative combination of Node.js and MongoDB

Encountering issues with certain Bootstrap components while integrating with ReactJS

Choose the OK button on the modal during the testing phase

Submitting a form and then redirecting to a PHP page

Is there a way to use Jquery to determine if a parent div contains a scroll

Issue with Bootstrap dropdown functionality when used within a Horizontal description block

PHP echo statement does not contain Div, yet Div renders properly when placed outside the echo statement

Troubleshooting Error in Converting a JSX File with Tailwind CSS and Typescript

PHP code for turning an email address into a clickable link

Is it possible to incorporate varied icon images for every item in an unordered list?

What can be done to prevent the aspect ratio from being altered?

"Enhance your website's user experience with the ability to zoom in and out

Alignment of text varies between canvas and HTML

Tips for transferring a codepen.io example to a .vue file

Is it a CSS or Javascript quirk when a div can become the child of the div before it?

Adding LocalStorage functionality to buttons in order to switch colors can be done by storing the

Unable to Implement Background Gradient Using Tailwind CSS Classes in React Component

The video keeps shifting out of the second column in the row within the bootstrap layout