Tailwind 自定义断点覆盖更大的断点

Question

我使用的是最新版本的 tailwind，我有一个自定义断点 xs:，它等于 540px。当我这样使用它时：h-[420px] xs:h-[400px] xl:h-[360px] 它适用于移动设备和 xs 断点，但 xl 断点不再注册 - 即使在桌面上高度也是 400。

这是我的配置：

theme: {
    extend: {
      screens: {
      'xs': '540px',
      ...

不幸的是，这在沙箱here 中有效，我不确定为什么它在我的本地无效。我正在使用 Sveltekit（重大更改之前的版本）、Ubuntu Linux 和 Chrome。

Answer 1

标准 CSS3 为我们提供了响应行为的最大值和最小值。

但顺风响应行为仅针对最小尺寸设置为默认值。
什么意思 ？

如果您再添加一个响应行为点...
您必须使用 sm:h-[360px] 或 md:h-[360px] 停止这种“xs”行为。
如果你不明白这个答案，我可以给你更多的细节。

但是请添加更多详细信息的代码。