禁用容器类的2xl断点

Question

毒风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应用程序中的一个工作示例：https://play.tailwindcss.com/0ErQ9yGQvs?size=2142x720&file=config