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

Question

我在配置文件中扩展了 tailwind 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;
    }
}

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

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

css

media-queries

tailwind-css