更改底部 div 的背景颜色答案

【问题标题】：Change background color of a div in the bottom更改底部 div 的背景颜色
【发布时间】：2021-10-26 20:41:46
【问题描述】：

我有以下代码：

<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">
                <button class="m-1">Go</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

我希望底部的灰色 div 忽略外部 div 的边距和填充，所以看起来外部 div 在底部更暗。如何使用 Tailwind 做到这一点？

这里是顺风游乐场的链接：https://play.tailwindcss.com/myBWPsTLJT

【问题讨论】：

把它移出那个 div play.tailwindcss.com/mReIdD4o4f
@php_nub_qq 但是底部的圆角是错误的
您可以根据需要添加四舍五入的类。比公认的答案更好的解决方案。
@php_nub_qq 为什么更好？无论如何，我都必须使用负边距来隐藏顶部容器的底部圆角。
因为如果在下一个版本的顺风 m-2 中从 2px 更改为 3px 会发生什么？当你有 1 个这样的更改时，这很简单，但如果它很快成为你的标准做法，你会发现自己有几十个这样的更改，并且在某一时刻更新将变得不可能。我提供的解决方案确保您的代码符合框架的标准，并且您可以轻松地使用rounded-t-lg 来避免在您的上 div 底部出现半径。

标签： html css tailwind-css

【解决方案1】：

玩负边距！

..and that should be your result!

.bg-gray-300 {
    width: 106%;
    margin: 40px -24px -24px -24px;
    padding-top: 30px;
    padding-left: 24px;
}

【讨论】：