禁用容器类的 2xl 断点

Question

Tailwind 2.0.1 的2xl断点设置为1536px。我想禁用此断点并将最大container宽度设置为xl断点。根据文档，我可以禁用 的所有响应变体container，但我只想禁用这个断点。相反，我尝试2xl通过更新 Tailwind 配置来禁用断点，如下所示：

module.exports = {
  theme: {
    screens: {
      '2xl': '1280px'
    }
  }
}

这不起作用，当我只想针对单个类和单个断点时，我也不认为这是正确的。

Answer 1

如果它只是为容器类删除此断点，则要指定要保留在theme.container.screens键中的断点。

module.exports = {
    theme: {
        container: {
            screens: {
                'sm': '640px',
                'md': '768px',
                'lg': '1024px',
                'xl': '1280px',
            }
        }
    }
}

或者，如果您使用与主主题相同的断点，并且不想再次指定相同的断点，则可以使用默认主题获取它们。

const defaultTheme = require('tailwindcss/defaultTheme')

let containerScreens = Object.assign({}, defaultTheme.screens)

// Delete the 2xl breakpoint from the object
delete containerScreens['2xl']

module.exports = {
    theme: {
        container: {
            screens: containerScreens
        }
    }
},

下面是 Tailwind Play 应用程序中的一个工作示例：https ://play.tai​​lwindcss.com/0ErQ9yGQvs?size=2142x720&file=config