That's all changed since Tailwind CSS v2.2 that introduced the new
peer sibling selector and the
placeholder-shown psuedo-class. Because of these additions you can now do this:
<div class="relative"> <input type="text" id="name" placeholder="Name" class="peer placeholder-transparent" /> <label for="name" class="absolute top-1/2 -translate-y-12 left-2 peer-focus:-translate-y-12 transition-transform peer-placeholder-shown:-translate-y-1/2">Name</label> </div>
This solution is clean, easy to read and does exactly what you want.
I'd still advise a different solution though, as
placeholder-shown is not fully supported yet, as you can see on Can I Use.