Add CSS Classes to the Blocks in the Editor

[agjs]

I'd love to add CSS classes, more specifically, Tailwind classes to the blocks (elements) in the editor content.

E.g.

If I press on a Heading 2 in a toolbar, I'd love an element to look like:

<h2 class="some-class">some value</h2>

I've managed to do that like this:

const CustomH2 = (props) => {
  const { block } = props;
  return <span className="text-4xl">{block.getText()}</span>;
};

const customBlockRenderFunc = (contentBlock, config) => {
  const type = contentBlock.getType();

  if (type === "header-two") {
    return {
      component: CustomH2,
    };
  }
};

The problem whatsoever is, is that no other styles are being applied to this element, e.g. if I try to make it Italic or some other style, it just ignores it. Would highly appreciate the help as I've tried pretty much everything today, unsure what else to do. The API documentation doesn't really tell much about this, and I don't want to override the editor styles manually as that would contradict the philosophy of Tailwind CSS.

[agjs]

@jpuri Do you have a minute to help me out with this one :-)?