cssckeditortailwind-cssckeditor5laravel-10

Interference between TailwindCSS and CKEditor 5 when aligning images


I have a Laravel 10 project with Vite as the asset builder. I am using Tailwind for CSS, so my app.css looks like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now I'm working on a text editing feature using CKEditor 5 as the WYSIWYG editor. I'm using various plugins, most relevant here are Text Alignment and Image. CKEditor was built using the online builder.

Within the texteditor, the alignment works as expected: enter image description here

Saving this content to the database gives the following html:

<h1>Title</h1>
<p>content</p>
<figure class="image image_resized" style="width:10.78%;">
<img style="aspect-ratio:1200/1248;" 
    src="http://laravel.test/storage/images/posts/1200px-Laravel.svg_1708936664.png" 
    width="1200" 
    height="1248">
</figure>

However, when saving the content to the database and then showing the content anywhere that has app.css loaded, the alignment is not working.

Here's an example:

@vite('resources/css/app.css')

<h1>Title</h1>
<p>content</p>
<figure class="image image_resized" style="width:10.78%;">
<img style="aspect-ratio:1200/1248;"
    src="http://laravel.test/storage/images/posts/1200px-Laravel.svg_1708936664.png" 
    width="1200" 
    height="1248">
</figure>

This gives the following output: enter image description here The size seems correct, but it doesn't align in the center.

I am guessing that for the editor itself, CKEditor's CSS classes are set somewhere in Javascript, while these classes are overridden by Tailwind (or non-existent?) when rendering the plain html content. Any help on how to solve this is greatly appreciated!

P.S. Loading the content as plain html (without loading app.css) also doesn't always render correctly. It really depends on whether any text alignment was applied to the image, and even then the resizing isn't always correct. For example, the above snippet without the @vite() line gives the following output: enter image description here


Solution

  • Turns out the answer is indeed fairly simple and is documented here.

    You can import the CKEditor content styles to other parts of your application so that any classes set in Javascript are also available when rendering the content.