cssfrontendtailwind-csstext-alignmenttext-align

How to set vertical alignment of placeholder in tailwind?

I'm trying to vertically align the placeholder of the third input field. Assuming that "text-start" and "text-end" classes when used with placeholder modifier in tailwind vertically align the placeholder text. But weirdly, in my case, "text-start" & "text-end" are doing the same as "text-left" & "text-right" respectively. enter image description here

<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>
Solution

  • After doing a bit of research about the issue, I got to know that adding class placeholder:-translate-y-6 fixes this bug. But still curious why the above mentioned classes aren't doing this.