如何在Tailwind CSS中自定义container宽度，修改2xl断点下的默认宽度？

完全移除2xl断点下container默认宽度 #

你只需要在项目根目录的tailwind.config.js配置文件中，重置theme.container.screens配置，删除默认的2xl断点规则即可：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        // 移除默认的 '2xl': '1536px' 配置项
      },
    },
  }
}

修改后重启Tailwind编译进程，2xl断点（视口宽度≥1536px）下的container就不会被限制最大宽度，会自动占满可用视口空间。

自定义2xl断点下container宽度 #

如果只是需要调整2xl断点下的container宽度而非完全移除，直接覆盖2xl对应的配置值即可：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    container: {
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1600px', // 替换为你需要的宽度值即可
      },
    },
  }
}

你也可以在container配置中追加全局通用规则，比如自动居中、默认内边距：

container: {
  center: true, // 所有断点下container自动水平居中
  padding: '1.5rem', // 所有断点下container默认带左右内边距
  screens: {
    // 上述断点配置
  }
}

内容的提问来源于stack exchange，提问作者morteza mortezaie