为何Tailwind CSS下的div无法占满全部宽度？技术求助

问题原因 #

你的div无法占据最大宽度，核心问题出在这两个类上：

• container：Tailwind内置的容器类，默认在不同屏幕断点下有固定的最大宽度限制（比如桌面端默认是max-w-7xl），设计初衷是创建居中的有限宽容器，而非全屏容器。
• mx-auto：该类让容器在父元素内水平居中，进一步限制了它不会撑满父元素宽度。

解决方法 #

方法1：移除container类（最简单直接） #

如果不需要container的响应式特性，直接删除它，添加w-full确保div占满父元素宽度，保留所需的内边距和高度：

<body class="bg-red-300">
    <div class="h-12 w-full px-5 bg-gray-400">
    </div>
</body>

方法2：保留container但取消宽度限制 #

如果想保留container自带的响应式内边距，同时让它占满宽度，添加max-w-none覆盖默认的最大宽度限制：

<body class="bg-red-300">
    <div class="container h-12 mx-auto max-w-none px-5 bg-gray-400">
    </div>
</body>

方法3：全局自定义容器配置（适合长期需求） #

如果项目中需要多个全屏容器，可以修改Tailwind配置文件tailwind.config.js，重新定义容器的默认行为：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    container: {
      center: true, // 保留居中特性（可选，不需要可删除）
      screens: {
        'sm': '100%',
        'md': '100%',
        'lg': '100%',
        'xl': '100%',
        '2xl': '100%',
      },
    },
  },
  plugins: [],
}

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