My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code:
@tailwind base;
@tailwind components;
@tailwind utilities;
I am currently implementing a text editing feature using CKEditor 5 as the WYSIWYG editor, with plugins like Text Alignment and Image. I used the CKEditor online builder to customize it.
Text alignment works perfectly within the editor:
However, when saving the content to the database and displaying it where app.css is loaded, the alignment doesn't work. 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>
While the size seems correct, the alignment is off. It appears that CKEditor's CSS classes may conflict with or be overridden by Tailwind when rendering the plain HTML content.
If anyone has a solution to this issue, I would greatly appreciate your help!
P.S. Rendering the content without loading app.css also presents challenges, as shown in this output: