nuxt.js - 禁用容器类的 2xl 断点

Question

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

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

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

Answer 1

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

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