title: margin of an element at specific breakpoints doesn't work in Tailwind
body: <p>I was trying to set margin of an <code>div</code> element at specific breakpoints by adding a <code>{screen}: prefix</code> but it won't work.
  What I tried is below;</p>
  <pre><code>&lt;div className={'flex justify-center'}&gt;
    &lt;div className={'w-full my-8 sm:my-20 md:my-48'}&gt;
      &lt;div {...props}&gt;
        {children}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Inspecting mode, I could identify that only <code>my-8</code> class works.</p>
  <p><a href="https://i.stack.imgur.com/SOTdR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SOTdR.png" alt="enter image description here" /></a></p>
  <p>All classes of Tailwind work well and <code>flex</code> for responsive works as well, but the margin(padding) for responsive doesn't work.
  I use Next.js and Tailwind CSS.</p>