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

Question

tailwind CSS 2xl 的容器宽度不适合我。我该如何改变它？

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

Answer 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) { ... }
        }
    }
}

Answer 2

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

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

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

how can i customize container width in tailwind-css?

css

tailwind-css