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

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

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在不同的屏幕尺寸中添加每种样式，但无法按预期工作。我相信这不能在繁琐的过程中重现，因为tailwindcss的CDN版本不支持自定义实用程序。

查看更多