css - 为什么@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在不同屏幕尺寸的每种样式中，但它不像我预期的那样工作。我相信这不能在 fiddle 中重现，因为 CDN version of tailwindcss 不支持自定义实用程序.

Answer 1

根据图像，查询的顺序是造成这种行为的原因。
这是因为当多个相同优先级的 CSS 规则应用于一个元素时，最后一个获胜。
在这种情况下:只要屏幕大小达到 xl 查询所需的宽度，对较小屏幕的查询也适用。由于中查询是最后一个查询，它会覆盖之前已声明的查询样式。
经验法则是在使用 min-width 时将查询从小到大排序。 (移动优先)。
使用 max-width 时(桌面优先)，反之亦然。
这里的解决方案是使用 max-width而不是 min-width或更改查询的顺序，使最小的屏幕在前，最大的屏幕在后。
示例 (颠倒顺序):

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