CKEditor 5 - Why h2 tags look like p tags?

Question

I Have a problem when use CKEditor 5 for my project ( VILT stack )

I can describe the problem as follows :

Here is my vue file:

<template>
    <app-layout>
        <ckeditor :editor="editor" @blur="onEditorInput" v-model="editorData" :config="editorConfig"></ckeditor>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        components: {
            AppLayout,
        },
        data() { 
            return {
                editor: ClassicEditor,
                editorData: '',
                editorConfig: {
                    // The configuration of the editor.
                }
            }
        },
        methods: {
            onEditorInput() {
                console.log(this.editorData);
            }
        }
    }
</script>

and here's the app.js :

require('./bootstrap');

// Import modules...
import Vue from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue';
import PortalVue from 'portal-vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';

Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
Vue.use( CKEditor );

const app = document.getElementById('app');

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

and here are the contents of the package.json file :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.8.2",
        "@inertiajs/inertia-vue": "^0.5.4",
        "@tailwindcss/forms": "^0.2.1",
        "@tailwindcss/typography": "^0.3.0",
        "autoprefixer": "^10.0.2",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "portal-vue": "^2.1.7",
        "postcss": "^8.1.14",
        "postcss-import": "^12.0.1",
        "tailwindcss": "^2.0.1",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^25.0.0",
        "@ckeditor/ckeditor5-vue2": "^1.0.5"
    }
}

So you can see in the console it says h2 but it looks like a p tag and I don't like it, how do I make the text look like h2 when I select the h2 option? i have tried reading the documentation ( Quick start ) but still haven't found the right solution

Answer 1

that's because you are using tailwindcss and it escapes H tags. You can add

@layer 
     base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

to your resources->css->app.css file and you will make it work as normal.