Using tailwind breaks CKEditor headings

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:6
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

50reactions
karelbilekcommented, Dec 1, 2020

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

9reactions
adamwathancommented, Nov 30, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ordered and unordered lists - CKEditor 5 Documentation
Use the editor below to see the CKEditor 5 list feature in action. ... Set indentation for text blocks such as paragraphs or...
Read more >
Tailwind CSS Ckeditor Example - LaraInfo
In this tutorial, we will create tailwind css ckeditor, ckeditor 4, ckeditor5, example with tailwind css.
Read more >
Migrating to TailwindCSS, iteratively, in your Drupal theme
I am migrating my personal site to use Tailwind. ... main.css : the frontend stylesheet; ckeditor.css : a CKEditor stylesheet for my editor ......
Read more >
Create a Temperature converter using NextJs, Tailwind CSS ...
In this tutorial you will learn how to build a Temperature Converter with Next.js and Tailwind CSS as frontend and Strapi headless CMS...
Read more >
Vue Ckeditor content not WYSIWYG - Stack Overflow
Using Yarn. yarn add @tailwindcss/typography. Then add the plugin to your tailwind.config.js file: // tailwind.config.js module.exports ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found