title: Why @screen xl and @screen lg gets overridden by @screen md in tailwindcss?
body: <p>I extended tailwind <code>margin</code> properties in the config file:</p>
  
  <pre><code>module.exports = {
      theme: {
          extend: {
              'margin': {
                  '1/5': '20%',
                  '1/4': '25%',
                  '1/3': '33.333333%'
              }
          }
      },
      variants: {
          margin: ['responsive']
      },
      plugins: []
  }
  </code></pre>
  
  <p>And then applied it in my <code>css</code> with the following:</p>
  
  <pre><code>@screen xl {
      .content-section.contract {
          @apply ml-1/5;
      }
  }
  
  @screen lg {
      .content-section.contract {
          @apply ml-1/4;
      }
  }
  
  @screen md {
      .content-section.contract {
          @apply ml-1/3;
      }
  }
  </code></pre>
  
  <p>But instead of getting the <code>margin-left: 20%</code> on extra large screens and <code>margin-left: 25%</code> on large screens, styles gets overridden by the value for medium screens.</p>
  
  <p><a href="https://i.stack.imgur.com/BeaX2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BeaX2.png" alt="enter image description here"></a></p>
  
  <p>I tried adding <code>!important</code> in each styles in different screen sizes but it doesn't work as I expected. I believe this cannot be reproduce in a fiddle, since customize utilities is not supported in <a href="https://tailwindcss.com/docs/installation/#using-tailwind-via-cdn" rel="nofollow noreferrer">CDN version of tailwindcss</a>.</p>