TailwindCSS中窗口缩至半宽时Div无法占满宽度的问题排查

问题现象 #

全屏状态下，带 container 类的 div 显示正常；但将窗口缩至半宽时，div 左右会出现空白，无法占满整个视口宽度。

代码示例 #

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
   <div class="header bg-red-300 h-12 container">Todoer</div>
</body>
</html>

原因分析 #

Tailwind 的 container 类是响应式居中容器，核心特性是：

• 当屏幕宽度大于对应断点时，限制容器最大宽度并自动居中
• 当屏幕宽度小于断点时，默认给容器左右添加内边距，这就导致小窗口下容器无法占满整个视口宽度。

解决方法 #

方法1：直接移除 container 类 #

如果不需要容器的居中宽度限制，删掉 container 类即可，此时 div 会默认占满父元素（body）的宽度，也就是整个视口：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
   <div class="header bg-red-300 h-12">Todoer</div>
</body>
</html>

方法2：保留容器但清除内边距 #

如果需要保留 container 的最大宽度限制，仅希望小屏幕下占满宽度，可以添加 px-0 类强制清除左右内边距：

<div class="header bg-red-300 h-12 container mx-auto px-0">Todoer</div>

注：mx-auto 是 container 类默认包含的居中样式，这里显式写出是为了更清晰。

方法3：自定义容器配置 #

如果需要更灵活的响应式控制，可以修改 Tailwind 配置，自定义不同断点下的容器内边距：

tailwind.config = {
  theme: {
    container: {
      center: true,
      // 为不同断点设置内边距，小屏幕（默认）设为0
      padding: {
        DEFAULT: '0',
        sm: '1rem',
        lg: '2rem',
        xl: '3rem',
      },
    },
  }
}

配置后，小屏幕下容器自动无内边距，大屏幕下保留内边距和宽度限制。

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