为什么@screen xl和@screen lg在tailwindcss中被@screen md覆盖？

Question

我在配置文件中扩展了顺风margin属性：

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

然后使用以下命令将其应用到我的css中：

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

但不是在超大屏幕上显示margin-left: 20%而在大屏幕上显示margin-left: 25%，而是被中型屏幕的值覆盖。

我尝试在每种样式中以不同的屏幕尺寸添加!important，但是它没有按我的预期工作。我相信这无法重现，因为CDN version of tailwindcss不支持自定义实用程序。

我在配置文件中扩展了顺风余量属性：module.exports = {主题：{扩展：{'margin'：{'1/5'：'20％'，'1/4'：'25％'， ...

Answer 1

根据图像，查询的顺序对此行为负责。