search

codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
28.52k stars 2.08k forks source link

Styling using only utility classes (like Tailwind) #2566

Open collimarco opened 10 months ago

collimarco commented 10 months ago

It would be nice to have a global option supported by all (official) blocks that allows the following:

  1. Do not add the default CSS for that block
  2. Allow to add arbitrary class names to each element generated by a block

The custom class names (used for styling, like text-lg, text-center, bg-gray-100, etc.) can be added to the config when you initialize the editor with the various blocks.

This would work very well with Tailwind CSS and utility classes in general.

Currently it's painful to control the exact appearance of the elements generated by Editor.js.

pMatt1988 commented 8 months ago

Currently, what I have to do is grab the plugin for the block I want to use from github, remove the css import in the main file, include it in my EditorJS Configuration. Then in my scss I target the class that is applied to the thing ie: "ce-header" and @apply the tailwind classes I want on it. This is far harder than it should be.

I would be happy enough if there was an option in the configuration to disable the default styling.

For more complicated plugins like the image plugin, I still include the css. I change any styling done to the "ce-*" element itself.