Styling using only utility classes (like Tailwind)

[collimarco]

trafficstars

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]

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.