Usage with TailwindCSS

[afiqiqmal]

How to make EditorJS works with tailwindcss? Currently Tailwind is overwrite the heading styling. Is there any changes could be made?

[Vadimkin]

You can install @tailwindcss/typography and wrap editor component with <article class="prose">...</article>

[3ffe]

From the documentation, @tailwindcss/typography only works for vanilla HTML. When I try to wrap the editor component with <article class="prose">...</article>, the heading got fixed, but the arrangement of the editor layouts and buttons is disrupted.

[Anderssxn]

How did you fixed the arrangement of the editor layouts?

[3ffe]

Running into the same problem.

[yoy0lol]

Did anyone find a fix for this yet?

[sdbxsdb]

Found a decent fix. If you install @tailwindcss/typography and in your tailwind.config.js file add:

 plugins: [
    require('@tailwindcss/typography')({
      className: 'whateverNameYouWantHere',
    }),
  ],
  

Then in your jsx add that 'whateverNameYouWantHere' to your editor-container as a class like this:

  
  <div
        className="editor-container whateverNameYouWantHere"
        id="editor-container"
      ></div>

This will remove tailwinds preflight styles from anything inside the 'whateverNameYouWantHere' meaning you can leave it as it is OR you can add custom styles to the editor in your App.css file: eg.

.whateverNameYouWantHere h1 {
@apply font-bold uppercase;
}

Works on my machine............

[binhkid2]

Tks.it's work 👍

[dtoro-dev]

y con vite donde configuran typography?

[SidneySaints]

For everyone is looking for a "clean" fix:
Just install @tailwindcss/typography

and paste this into your scss file:

.ce-block__content{
  @apply prose
}

[collimarco]

Thanks. This works better than wrapping the entire editor inside prose

[aravsanj]

Has anyone made Editorjs work with Nextjs and Tailwind?

[mehrab-wj]

Hi everyone, if you think Tailwind typography is not exactly a good fit, I wrote this custom typography class which I think is good, and similar to the original:

.ce-block__content {

    /* @apply prose; */
    p,
    ce-paragraph {
        @apply tracking-wider text-[12px] text-gray-500;
    }

    h1 {
        @apply text-[32px] leading-5 font-extrabold;
    }

    h2 {
        @apply text-[24px] leading-5 font-bold;
    }

    h3 {
        @apply text-[18px] leading-5 font-bold;
    }

    h4 {
        @apply text-[16px] leading-5 font-semibold;
    }

    h5 {
        @apply text-[14px] leading-5 font-semibold;
    }

    h6 {
        @apply text-[14px] leading-5 font-semibold;
    }
}

[collimarco]

Everything would be much simpler and clean if we had a way to disable default styles and pass some tailwind classes for styling blocks: as proposed here #2566

[Alevarr]

From tailwind documentation https://tailwindcss.com/docs/preflight#disabling-preflight

Instead of

@import "tailwindcss";

make

@layer theme, base, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities);

[marouane-dev75]

Better Solution Without Installing Any New Library

Just replace:

@import "tailwindcss";

with:

@layer theme, base, components, utilities;
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@layer base {
  #editorjs :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, pre, code) {
    margin: revert;
    padding: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
    font-family: revert;
    list-style: revert;
  }
}

The solution lies in this block:

@layer base {
  #editorjs :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, pre, code) {
    margin: revert;
    padding: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
    font-family: revert;
    list-style: revert;
  }
}

This approach reverts the default browser styles for typography elements within the #editorjs container, preventing Tailwind's preflight styles from interfering with the editor's formatting.