Change classname in Block editor save function

Hi,

I have a question about custom Gutenberg Block’s save function.

I am currently developing custom Gutenberg blocks using @wordpress/scripts + tailwind.

Since I am using tailwind, I use many utility classes on both edit and save function

For example:

Snippet from Edit.js

<div className="mt-6 border-t border-gray-200">

<InnerBlocks allowedBlocks={["core/paragraph"]} template={[["core/paragraph"]]} />

</div>

Snippet from Save.js

<div className="mt-6 border-t border-gray-200" data-module="accordion">
    <InnerBlocks.Content />
 </div>

Here is my question.

Let’s say that I added a registered custom block on the page and saved on my local setup.

While I am running npm run start and changing/adding/removing the class name from the Save.js, I noticed that the block that I created is no longer valid with following message This block contains unexpected or invalid content. I know I can add an new custom block but I want to avoid this process because I have to re-import content. I want to make my custom block to be valid even if I edit class name or add more components on Save.js

Anyone have an idea how to resolve this issue? I am curious about how the core blocks can be backward compatible.

Any assistance would be greatly appreciated.