如何在 tailwind-css 中自定义容器宽度？

【问题标题】：how can i customize container width in tailwind-css?如何在 tailwind-css 中自定义容器宽度？
【发布时间】：2021-11-01 11:35:57
【问题描述】：

我不需要 2xl 中的 tailwind CSS 容器宽度。我怎样才能改变它？

我想删除它在 2xl 中的默认宽度。我该怎么做？

【问题讨论】：

有一个 Github issue 可能对你有帮助 github.com/tailwindlabs/tailwindcss/issues/1102

标签： css tailwind-css

【解决方案1】：

只向 tailwind.config.js 添加必要的断点。默认值可以在tailwind theme config看到

module.exports= {
    theme: {
        screens: {
            'sm': '640px', // => @media (min-width: 640px) { ... }
            'md': '768px', // => @media (min-width: 768px) { ... }
            'lg': '1024px', // => @media (min-width: 1024px) { ... }
            'xl': '1280px', // => @media (min-width: 1280px) { ... }
        }
    }
}

【讨论】：

【解决方案2】：

或者，如果您需要一些不直接与“屏幕”配置相关的自定义解决方案（如 JHeth 建议的那样），您可以像这样单独配置容器行为：

module.exports= {
    theme: {
        container: {
            screens: {
                'sm': '100%',
                'md': '100%',
                'lg': '1024px',
                'xl': '1280px',
                '2xl': '1600px',
            }
        }
    }
}

【讨论】：