How to render Ckeditor 5 text as it is with tailwind css?

Question

Hi I am using Ckeditor with vue3 and tailwind css . But the text produced by rich edior is rendering as a p tag . No tags like ul ol and table are working .

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { reactive } from 'vue';
export default {
    setup(){
        const state=reactive({
            editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    
                }
        })

        return {state}
    }
}
</script>

<template>
    <div id="vk">
        <ckeditor :editor="state.editor" v-model="state.editorData" :config="state.editorConfig"></ckeditor>
    </div>
    
        <div id="description" v-html="state.editorData">

        </div>
    
</template>

<style scoped>
    
</style>
``

Answer 1

Now ckeditor-tailwind-reset plugin is deprecated since tailwind has an official plugin tailwind-typography, so you don't need to use this to add beautiful default typographic. Except for the table, maybe you can just copy some CSS from this package into your project CSS.

Just install:

npm install -D @tailwindcss/typography

Extend config:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Add prose class wherever you need, and it ignores tailwind css:

<article class="prose">
  {{ markdown }}
</article>