Reset breakpoint-ed values, back to their original values

[flatline-studios]

I'm new to Tailwind, so forgive me if this already exists within this wonderful toolkit, but is there a way to reverse all the previously applied breakpoint styles, so if I need to completely change the way an element, or component, is presented, then it's a simple, one statement affair. Rather than having to painfully undo them all, one by one?

This is probably better explained with a quick example, so, if I have something like:

<div class="my-div"></div>
<style>
.my-div {
  @apply block p-2 m-2 h-1/2 w-1/2 sm:flex sm:p-0 sm:m-0 sm:h-4 sm:w-4;
}
</style>

Then I decide that at the md breakpoint, I want this div to be completely different, so I modify it to look something like:

<div class="my-div"></div>
<style>
.my-div {
  @apply block p-2 m-2 sm:flex sm:p-0 sm:m-0 sm:h-4 sm:w-4 md:block md:p-2 md:m-2 md:h-auto md:w-auto md:text-gray-500;
}
</style>

Then in order for me to simply say, I just want the div to have a padding of 2, a margin of 2, and be a block again, I instead have to also reset the height and width that's carried over from the sm breakpoint.

I don't want to change the default config breakpoints, so that the sm breakpoint stops the pixel before the md kicks in, as I probably have other styles that rely on this cascade.

Nor do I want to create a new sm2md breakpoint, or anything, as that will just make it messy to deal with, is likely to cause errors, etc.

What I really want to be able to do, is say, "Hey! I don't want any of this sm stuff to bleed over in to the md styles.".

I would propose something like:

@apply block p-2 m-2 sm:flex sm:p-0 sm:m-0 sm:h-4 sm:w-4 md:reset:sm md:text-gray-500;

Which would give the equivalent results to the much larger 2nd code example.

<breakpoint-to-set>:reset:[<breakpoint-to-reset>, ...]

This is a contrived example, but I think it illustrates the idea.

I can't see that Tailwind can't handle this, practically, but I can't seem to find any documentation that indicates that this is possible.

I also realise that this won't be possible on inline styles (other than maybe having a straight up <div class="sm:m-4 md:reset-initial"></div>, that just hardcore resets every possible style to initial, or inherit); but when pulling out long class blocks with the @apply directive, I think this makes a lot of sense to exist.

[VashJuan]

This isn't a full solution for you, but for a 'full-bleed' effect, try:
https://piccalil.li/blog/creating-a-full-bleed-css-utility/
Super simple - if its what you are looking for.