如何在Tailwind CSS中对齐label与textarea的文本内容？

直接调整label的定位和边距属性，就能让label文本和textarea内的文本起始位置对齐，修改后的代码如下：

<div class="flex h-screen w-screen items-center justify-center">
  <div class="relative w-1/2">
    <textarea class="h-52 w-full rounded-md border-2 border-gray-500 py-2 outline-none focus:border-blue-400 px-3"></textarea>
    <label class="text-md absolute top-0 left-3 -translate-y-1/2 bg-white px-1">
      Comment
    </label>
  </div>
</div>

修改说明： #

• 移除了label上的-mx-1属性，这个负外边距会让label整体向左偏移1px，导致文本起始位置和textarea内的文本错位。
• 保留left-3对应textarea的px-3内边距，同时px-1用来让label的白色背景覆盖住textarea的边框，避免文字和边框重叠。

如果需要更精准的对齐，可以根据字体大小微调left值，比如改成left-[calc(0.75rem+1px)]（0.75rem对应px-3），不过大部分情况下上面的修改已经能解决问题。

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