顺风时如何设置占位符垂直对齐？

Question

我正在尝试垂直对齐第三个输入字段的占位符。假设“text-start”和“text-end”类与 tailwind 中的占位符修饰符一起使用时垂直对齐占位符文本。但奇怪的是，就我而言，“text-start”和“text-end”分别与“text-left”和“text-right”执行相同的操作。

<div class="flex flex-col space-y-8">
              <div class="flex flex-col space-y-4 w-[540px]">
                <input class="placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[50px] p-2" placeholder="Name and Surname*">
                <input class="placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[50px] p-2" placeholder="Email*">
                <input class="placeholder:text-end placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[98px] p-2 text-start" placeholder="Please provide as much detailed information as possible. Thank you *">
              </div>
              <button class="bg-Green w-[210px] h-[50px] rounded-lg">SUBMIT MESSAGE</button>
</div>

Answer 1

对这个问题做了一些研究后，我知道添加类

placeholder:-translate-y-6

修复了这个错误。但仍然很好奇为什么上面提到的类没有这样做。

Answer 2

您还可以使用课程

placeholder:text-center

。