添加md:text-lg类后Tailwind响应式文本出现对齐偏移问题

添加md:text-lg后出现对齐偏移，核心原因有两个：

1. 断点下行高未被覆盖
   Tailwind的text-lg类自带默认line-height（对应值为1.5rem），你在peer-checked状态下仅将文本尺寸设为text-[0px]，但没有在md断点下覆盖这个行高。导致即使文本透明且尺寸为0，该div仍保留了text-lg对应的行高高度，无法贴合蓝色条边缘。

2. p标签默认边距的干扰
   浏览器默认给<p>标签设置了上下margin，当文本放大为text-lg时，这个默认边距的影响会被放大，进一步加剧了对齐偏移问题。

针对这两个问题，修改代码如下：

<div class="bg-blue-100">
  <label>
    <input type="checkbox" class="peer sr-only" />
    <div id="navbarMenu" class="flex cursor-pointer flex-col items-center justify-center overflow-hidden transition-all duration-1000 before:h-0.5 before:w-24 before:bg-black after:h-0.5 after:w-24 after:bg-black peer-checked:text-[0px] peer-checked:text-transparent peer-checked:before:h-0 peer-checked:before:w-0 dark:before:bg-white dark:after:bg-white md:text-lg md:peer-checked:leading-0">
      <p class="m-0">Menu</p>
    </div>
    <p class="m-0 flex cursor-pointer flex-col items-center justify-center text-[0px] text-gray-700 transition-all before:h-[0px] before:w-0 peer-checked:text-base peer-checked:delay-1000 peer-checked:before:w-24 peer-checked:before:bg-black dark:text-gray-700 peer-checked:dark:before:h-0.5 peer-checked:md:text-lg">Hide</p>
  </label>
</div>

关键修改点：

• 给navbarMenu添加md:peer-checked:leading-0，在md断点的选中状态下将行高设为0，彻底坍缩元素高度。
• 给两个<p>标签添加m-0，清除浏览器默认的上下边距，避免对齐干扰。
• 修正了Hide标签中多余的dark:dark:before重复前缀，改为peer-checked:dark:before。

如果想让上下横线的位置更稳定，不受文本尺寸影响，可以给navbarMenu添加relative，然后将伪元素设置为绝对定位：

<div id="navbarMenu" class="relative flex cursor-pointer flex-col items-center justify-center overflow-hidden transition-all duration-1000 before:absolute before:top-[10%] before:h-0.5 before:w-24 before:bg-black after:absolute after:bottom-[10%] after:h-0.5 after:w-24 after:bg-black peer-checked:text-[0px] peer-checked:text-transparent peer-checked:before:h-0 peer-checked:before:w-0 dark:before:bg-white dark:after:bg-white md:text-lg md:peer-checked:leading-0">

这样横线会基于父容器定位，完全脱离文本流，彻底避免文本尺寸变化对横线位置的影响。

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