顺风响应式设计

Question

我是 Tailwind 的新手，我正在阅读响应式设计章节，我知道默认情况下，Tailwind 使用移动优先断点系统并定义一些类名，例如 sm 、 md 、 xl ... for min- 修饰符、 max- sm , max-xl ...用于最大修饰符

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
   theme: {
      screens: {
        ...defaultTheme.screens
      }
   }
}

如果我删除代码“...defaultTime.screens”，则 min- 和 max- 修饰符将不再按预期可用，并且如果我在下一行中添加新键：

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
   theme: {
      screens: {
        ...defaultTheme.screens,
        'myResponsive': '300px'
      }
   }
}

它将添加 myResponsive 类名作为 min- 修饰符和 max-myResponsive 类名作为 max- 修饰符，这仍然是预期的，但如果我将上面的代码更改为：

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
   theme: {
      screens: {
        ...defaultTheme.screens,
        'myResponsive': {'min': '300px'}
      }
   }
}

事件它将添加 myResponsive 类名作为 min- 修饰符，但是 max-myResponsive 类名将不再添加为 max- 修饰符，现在我什至无法使用

max-sm

、

max-xl 

... max- 修饰符的类名

谁能告诉我为什么？我认为当我们想要使用自定义 max- 修饰符时，我们应该使用“对象”类型值来定义它，如果我们想防止覆盖默认的 max- 响应修饰符，我们应该在

theme.extend.screens 中定义设置

键？

Answer 1

根据 此拉取请求中详细说明的限制，添加了

min-*

和

max-*

变体：

为了确保正确排序，我们决定将这些功能的使用限制在“简单”的屏幕上，这意味着它们是基于

min-width

的，并且仅包含使用相同单位的字符串值。

[…]

虽然这些无效并将禁用这些新功能：

module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      portrait: { raw: "(orientation: portrait)" },
    },
  },
};

module.exports = {
  theme: {
    extends: {
      screens: {
        xs: { min: "320px" },
      },
    },
  },
};

因此，为了能够对

min-*

值使用 max-* 或

screens

变体，请考虑将自定义

screen.myResponsive

值更改为简单的字符串值：

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
   theme: {
      screens: {
        ...defaultTheme.screens,
        'myResponsive': '300px',
      }
   }
}