更改底部 div 的背景颜色

Question

我有以下代码：

<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 做到这一点？

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

Answer 1

玩负边距！

..and that should be your result!

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

更改底部 div 的背景颜色

Change background color of a div in the bottom

html

css

tailwind-css