margin of an element at specific breakpoints doesn't work in Tailwind

Question

I was trying to set margin of an div element at specific breakpoints by adding a {screen}: prefix but it won't work. What I tried is below;

<div className={'flex justify-center'}>
  <div className={'w-full my-8 sm:my-20 md:my-48'}>
    <div {...props}>
      {children}
    </div>
  </div>
</div>

Inspecting mode, I could identify that only my-8 class works.

All classes of Tailwind work well and flex for responsive works as well, but the margin(padding) for responsive doesn't work. I use Next.js and Tailwind CSS.