禁用容器类的2xl断点

Question

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

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.tailwindcss.com/0ErQ9yGQvs?size=2142x720&file=配置