Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling using only utility classes (like Tailwind) #2566

Open
collimarco opened this issue Dec 18, 2023 · 1 comment
Open

Styling using only utility classes (like Tailwind) #2566

collimarco opened this issue Dec 18, 2023 · 1 comment

Comments

@collimarco
Copy link

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
Copy link

pMatt1988 commented Feb 14, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants