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

【问题标题】：Why @screen xl and @screen lg gets overridden by @screen md in tailwindcss?为什么@screen xl 和@screen lg 在tailwindcss 中被@screen md 覆盖？
【发布时间】：2020-05-16 20:03:40
【问题描述】：

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

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 不支持自定义实用程序。

【问题讨论】：

你确定你的屏幕在这个例子中足够宽吗？我看到标尺是从 400 开始的。也许它不够大，无法达到 1024px？
@PavelLint 图片已被裁剪。我的屏幕分辨率为 1920 x 1080，并且行为相同。
我猜@screen xx应该翻译成@media (max-width: yyy)，而不是@media (min-width: yyy)。
是的，@Kosh 是对的。根据图像，这正是这里发生的事情。您要么必须使用 max-width 而不是 min-width，要么更改查询的顺序，因此较小的屏幕在前，最大的屏幕在后。
@threeFatCat：很高兴听到这个消息，总是热心帮助:)

标签： css media-queries tailwind-css

【解决方案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;
    }
}

【讨论】：