Why @screen xl and @screen lg gets overridden by @screen md in tailwindcss?

According to the image, the order of the queries is responsible for this behavior.

This is because whenever multiple css rule of the same priority apply to an element the last one wins.

In this case here: whenever a screen size reaches the width required by the xl query, the queries for the smaller screens apply as well. Since the medium query is the last one, it overrides the styles of the queries that have been declared before.

A rule of thumb is to sort the queries from smallest to largest when using min-width (mobile first). When using max-width (desktop first), it is the other way round.

The solution here is to either use max-width instead of min-width or change the order of your queries, so the smallest screen comes first and the largest last.

Example (reversed order):

@screen md {
    .content-section.contract {
        @apply ml-1/3;
    }
}

@screen lg {
    .content-section.contract {
        @apply ml-1/4;
    }
}

@screen xl {
    .content-section.contract {
        @apply ml-1/5;
    }
}