Using tailwind breaks CKEditor headings

Describe the problem:

When one uses Tailwind, CKEditor (a popular WYSIWYG editor) slightly breaks, because it depends on H1, H2, H3 and P default styles.

Tailwind redefines default h1, h2, h3, which are then not displayed in the editor.

I think it’s a Tailwind issue and not CKEditor issue - the party doing something “weird” is tailwind, not CKEditor. CKEditor reasonably assumes normal headers.

Link to a minimal reproduction:

https://www.karelbilek.com/tailwind (all HTML in source) {edit Nov 2021: took it down now, sorry)

You can see the header is not proper <h1>.

You can work over that by using tailwind typography and wrapping the place for CKEdit with prose, but that breaks the select slightly.

.ck-content {
  @apply prose;
}

doesn’t seem to work. What did work for me is adding a code like

ClassicEditor.create( document.querySelector( '#editor' ) ).then(()=>document.querySelector( '.ck-content' ).forEach(d=>d.classList.add('prose'));

but it feels a bit hacky still.

Unfortunately, tailwind doesn’t seem to allow disabling base styles for a div.

but we’re not convinced that simply disabling our base styles is what you really want

Unfortunately, this is sometimes what I want.

[karelbilek]

For others: CSS that worked for me looks like this. Note that it uses revert, which is quite new and might not work in all browsers. MDN has it as “not working” in Chrome, but it seems incorrect, it’s working there since October.

edit: I just fixed that on MDN.

.ck-content > blockquote,
.ck-content > dl,
.ck-content > dd,
.ck-content > h1,
.ck-content > h2,
.ck-content > h3,
.ck-content > h4,
.ck-content > h5,
.ck-content > h6,
.ck-content > hr,
.ck-content > figure,
.ck-content > p,
.ck-content > pre {
  margin: revert;
}

.ck-content > ol,
.ck-content > ul {
  list-style: revert;
  margin: revert;
  padding: revert;
}

.ck-content > table {
  border-collapse: revert;
}

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

https://developer.mozilla.org/en-US/docs/Web/CSS/revert

[adamwathan]

Hey! The solution to this by the looks of it is to define your CKEditor typography styles explicitly, like this somewhere in your own CSS file:

.ck-content h2 {  font-size: 20px; }
.ck-content p { font-size: 16px; margin-top: 1em; margin-bottom: 1em }
/* ... */

etc.

Can’t and don’t plan to change this inside Tailwind itself as it would be a massive breaking change that would break every Tailwind app that exists, haha.

You disable our base styles easily though by just disabling preflight in your config:

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

More info here: https://tailwindcss.com/docs/preflight#disabling-preflight

This type of reset is not unique to Tailwind and exists in many other tools as well.