Header is not styling itself about header

[PradhaID]

i need to add several styles on my css when using tailwindcss like :

h1.ce-header{
  @apply text-3xl font-bold
}
h2.ce-header{
  @apply text-2xl font-semibold
}
h3.ce-header{
  @apply text-xl font-semibold
}
h4.ce-header{
  @apply text-lg font-semibold
}
h5.ce-header{
  @apply text-base font-semibold
}
h6.ce-header{
  @apply text-base font-semibold
}

[trancethehuman]

Issue still exists with Tailwind 3.3.2 and editorjs 2.28

[roncarino]

I'm having the same problem but I'm not using any css framework, just pure css

Umm that sounds quite odd honestly. Anyway, in my case, I have solved extending Header class and overwriting render function to add and extra wrapper around "h" element. Not sure if this can help you.

class MyHeader extends Header {
    /**
     * Return Tool's view
     * @returns {HTMLHeadingElement}
     * @public
     */
    render() {
        const extrawrapper = document.createElement('div');
        extrawrapper.classList.add('content');
        extrawrapper.appendChild(this._element);

        return extrawrapper;
    }
}

[saqibtanveer786]

Those who are using tailwind can solve this by adding the following code to their global.css:
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
/* ... */
}

I found this from the below two links:
https://tailwindcss.com/docs/preflight#headings-are-unstyled
https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

[MejanH]

in my case, tailwindcss removed the default browser heading styles. source: https://laracasts.com/discuss/channels/javascript/editorjs-inline-styles-overruled-by-tailwindcss

[roncarino]

I think I found the reason. I am using Bulma to build my project and somehow its css override your "ce-header" css. Not entirely sure how to make this work now but at least I know the problem. I think I can close the issue. Thanks

[AjeaSmith]

I'm having the same problem but I'm not using any css framework, just pure css

[dbwodlf3]

It works. but. if style not applied. then you need to check h tags are okay.
This tool use just pure css style. if you edit default h tag style, then applied that style.
(css framework like bulma could edit h tags default style.)

[HonestCodeWasTaken]

Fixed in NextJS/ChakraUI by adding a global stylesheet inside in _app.tsx file, the css looked like in this pen
https://codepen.io/adamlacombe/pen/LvpJqO

[stevie101]

Just experienced the same issue with Bulma. Found if you wrap the editorjs div with one that includes a content class it stopped overriding the heading tags.

<div class="content"><div id="editorjs"></div></div>

[OFD16]

i need to add several styles on my css when using tailwindcss like :

h1.ce-header{
  @apply text-3xl font-bold
}
h2.ce-header{
  @apply text-2xl font-semibold
}
h3.ce-header{
  @apply text-xl font-semibold
}
h4.ce-header{
  @apply text-lg font-semibold
}
h5.ce-header{
  @apply text-base font-semibold
}
h6.ce-header{
  @apply text-base font-semibold
}

this solved my next.js tailwind website for editor.js problem thanks a lot

[code-march]

Reference

Thank you Brother (Solved)