为容器禁用 2xl 断点 class

Question

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

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

这是行不通的，当我只想定位一个 class 和一个断点时，我认为这也不正确。

Answer 1

如果只是为容器 class 删除此断点，您需要在 theme.container.screens 键中指定要 keep 的断点。

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=config

为容器禁用 2xl 断点 class

Disable 2xl breakpoint for container class

nuxt.js

tailwind-css