我正在尝试垂直对齐第三个输入字段的占位符。假设“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>
对这个问题做了一些研究后,我知道添加类
placeholder:-translate-y-6
修复了这个错误。但仍然很好奇为什么上面提到的类没有这样做。
您还可以使用课程
placeholder:text-center
。