如何使用Tailwind让底部div忽略外层边距内边距调整背景色效果

你可以通过给底部灰色div添加负外边距抵消外层容器的padding，实现撑满底部的效果，具体实现如下：

实现思路 #

外层带bg-gray-100的容器设置了p-6的内边距，给底部灰色块添加对应值的左右负边距、底部负边距，即可抵消内边距限制撑满容器底部，同时外层容器自带的overflow-hidden会自动裁剪超出部分，保留原有的圆角效果。

修改方案 #

仅需修改底部灰色div的类即可：

<!-- 原代码 -->
<!-- <div class="bg-gray-300"> -->
<!-- 修改后代码 -->
<div class="bg-gray-300 -mx-6 -mb-6 px-6 py-3">
  <button class="m-1">Go</button>
</div>

修改后的完整代码：

<div>
  <div>
    <section>
      <div class="flex flex-col flex-auto w-full min-w-0">
        <div class="m-2">
          <div
            class="bg-gray-100 p-6 rounded-lg overflow-hidden shadow border-b border-gray-300 text-gray-900">
            <div><h1 class="text-2xl font-bold mb-2 text-gray-800">Run</h1>
              <h2>Run variables</h2>
              <ul>
                <li><input class="m-1" placeholder="Name" value="">
                  <input class="m-1" placeholder="Value" value="">
                </li>
                <li><input class="m-1" placeholder="Name" value="">
                  <input class="m-1" placeholder="Value" value="">
                </li>
                <li><input class="m-1" placeholder="Name" value="">
                  <input class="m-1" placeholder="Value" value="">
                </li>
                <li><input class="m-1" placeholder="Name" value="">
                  <input class="m-1" placeholder="Value" value="">
                </li>
              </ul>
              </p>
              <div class="bg-gray-300 -mx-6 -mb-6 px-6 py-3">
                <button class="m-1">Go</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

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