When you delete a component, duplicate classes between components will be deleted.

You should avoid putting shared styles in component-related ones. Check this discussion on how to prevent this: https://github.com/GrapesJS/grapesjs/discussions/5968

As a temporary workaround, styles for each component are prefixed with id.

import { html as hero1html, css as hero1css } from './data/hero-1';
import { html as content1html, css as content1css } from './data/content-1';
const sources = [
  {
    id: 'hero-1',
    name: 'Hero 1',
    category: 'Hero',
    html: hero1html,
    css: hero1css,
    class: 'bg-gray-100 p-5',
  },
  {
    id: 'content-1',
    name: 'Content 1',
    category: 'Content',
    html: content1html,
    css: content1css,
    class: 'p-5',
  }
]

const escapeTailwindClasses = (str, id) => {
  return str.replace(/(\.[a-z0-9_-]+)(:\w+)/gi, (match, p1, p2) => {
    return `.${id}${p1.replace('.', '')}\\${p2}`;
  });
};

export const importBlocks = (editor, options = {}) => {
  const domc = editor.DomComponents;
  const blockManager = editor.BlockManager;
  sources.forEach(source => {
    const prefix = source.id + '-';
    const prefixedHtml = source.html.replace(/class="([^"]*)"/g, (match, className) => {
      return `class="${className.split(' ').map(cn => prefix + cn).join(' ')}"`;
    });

    const prefixedCss = source.css.replace(/\.([a-z0-9_-]+)(?=\s*[{,])/gi, (match, className) => {
      return '.' + prefix + className;
    });

    console.log(escapeTailwindClasses(prefixedCss, prefix))
    const prefixedClasses = source.class.split(' ').map(cn => prefix + cn).join(' ');
    domc.addType(source.id, {
      model: {
        defaults: {
          attributes: { class: prefixedClasses },
          components: prefixedHtml,
          styles: escapeTailwindClasses(prefixedCss, prefix),
        },
      },
    });
    blockManager.add(source.id, {
      category: source.category,
      id: source.id,
      label: source.name,
      content: {
        type: source.id,
      },
    });
  });
}

@artf thank you for your reply. I would like to confirm #5968

Thanks for reporting this, @ihatov08.

Great question about When you delete a component, duplicate classes between components will be deleted.. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!