Tailwind的mb-10类在暗黑模式下导致底部白边问题求助

这个问题的核心原因不是mb-10本身，而是表单的外边距区域不在section的深色背景覆盖范围内：section的bg-white dark:bg-gray-900只作用于自身，但表单是section的直接子元素，section没有设置底部内边距，表单的mb-10是给自身添加的底部外边距，这个区域不属于section的背景范围，暗黑模式下就会露出父元素（比如body）的白色背景。

下面是几个直接可行的解决办法：

方法1：给section添加底部内边距，替换表单的外边距 #

删掉表单的mb-10，给section加上pb-10（数值可根据需求调整），让section的深色背景覆盖到表单下方区域：

<section class="bg-white dark:bg-gray-900 pb-10">
  <div class="py-8 lg:py-4 px-4 mx-auto max-w-screen-md">
    <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">
      联系我们
    </h2>
    <p class="mb-8 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
      遇到技术问题？想反馈测试功能？需要了解商业计划细节？请告诉我们。
    </p>
  </div>
  <form action="#" class="space-y-8 px-10 ml-14">
    <!-- 表单内容保持不变 -->
  </form>
</section>

方法2：将表单移入section内部的统一容器 #

把表单放到顶部标题所在的max-w-screen-md容器里，让整个内容都处于统一的背景容器内，避免外边距超出背景范围：

<section class="bg-white dark:bg-gray-900">
  <div class="py-8 lg:py-4 px-4 mx-auto max-w-screen-md">
    <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">
      联系我们
    </h2>
    <p class="mb-8 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">
      遇到技术问题？想反馈测试功能？需要了解商业计划细节？请告诉我们。
    </p>
    <!-- 表单移到这个容器内 -->
    <form action="#" class="space-y-8 px-10 mb-10 ml-14">
      <!-- 表单内容保持不变 -->
    </form>
  </div>
</section>

方法3：给表单添加与section一致的背景类 #

如果必须保留表单的mb-10，可以给表单也加上bg-white dark:bg-gray-900，让表单的外边距区域被自身背景覆盖：

<form action="#" class="space-y-8 px-10 mb-10 ml-14 bg-white dark:bg-gray-900">
  <!-- 表单内容保持不变 -->
</form>

优先推荐方法1或2，这样布局更规整，避免重复设置背景类。

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