@screen xl and @screen lg gets overridden by @screen md

[threeFatCat]

I extended the margin utilities in the tailwind.config.js:

module.exports = {
    theme: {
        extend: {
            'margin': {
                '1/5': '20%',
                '1/4': '25%',
                '1/3': '33.333333%'
            }
        }
    },
    variants: {
        margin: ['responsive']
    },
    plugins: []
}

Now in my CSS, when I tried to apply the following, where if the screen is xl and lg it should apply the following margin-left values:

@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;
    }
}

But the values for lg and xl gets overridden with the value from md though the screen is currently at max size of my screen which is 1920 x 1080. Am I missing something?

Here is the screenshot:

[threeFatCat]

Changing the query order did the trick for me as suggested here