如何用CSS（Tailwind）设置超出容器宽度的分隔线

要让红色分隔线铺满外层容器的完整宽度，同时保持所有区块统一的 px-6 内边距，只需调整分隔线的 Tailwind 类，添加 -mr-6 抵消外层容器右侧的内边距即可：

<div class="-ml-6 -mr-6 w-full border-t-2 border-red-400"></div>

完整修改后的代码： #

<div class="grid h-screen w-screen content-center justify-center">
  <div class="grid w-80 gap-4 rounded-lg bg-slate-50 p-4 px-6 shadow-lg">
    <div class="grid gap-2 bg-slate-200">
      <div class="text-lg">Section 1</div>
      <div class="text-sm">Item1 1</div>
      <div class="w-full border-t"></div>
      <div class="text-sm">Item1 2</div>
      <div class="w-full border-t"></div>
      <div class="text-sm">Item1 3</div>
    </div>

    <div class="-ml-6 -mr-6 w-full border-t-2 border-red-400"></div>

    <div class="grid gap-2 bg-slate-200">
      <div class="text-lg">Section 2</div>
      <div class="text-sm">Item1 1</div>
      <div class="w-full border-t"></div>
      <div class="text-sm">Item1 2</div>
      <div class="w-full border-t"></div>
      <div class="text-sm">Item1 3</div>
    </div>
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>

原理说明： #

• 外层容器的 px-6 为所有内部元素添加了左右各 24px 的内边距
• -ml-6 让分隔线向左偏移 24px，抵消左侧内边距
• -mr-6 让分隔线向右偏移 24px，抵消右侧内边距
• 配合 w-full，分隔线的宽度将完全覆盖外层容器的整体宽度

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