Tailwind 在聚焦时在输入边框上显示占位符

Question

我正在尝试使用 Tailwind 为项目创建一个表单。对于这个项目，我需要创建某种类型的输入字段。当该字段获得焦点时，该字段的占位符应更改输入边框顶部的位置。使用 Tailwind 可以实现这一点吗？

这是我正在使用的输入的代码：

<input
      type="text"
      name="email"
      id="email"
      v-model="email"
      placeholder="Email address"
      class="my-2 px-4 py-2 border rounded-lg text-gray-700 focus:outline-none text-sm"

    />

这是一个如何在聚焦时显示输入的示例：

Answer 1

您可以使用 ：

<div class="relative z-0  px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold  text-[11px]  text-gray-900 dark:text-gray-300
bg-white relative px-1  top-2 left-3 w-auto group-focus-within:text-red-600 ">
Email Address 
</label>
<input type="email" name="first_name" id="first_name" class="h-8 text-10  bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact@gmail.com" />

或者

<div class="relative z-0  px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold  text-11  text-gray-900 dark:text-gray-300
bg-white relative px-1 group-focus-within:top-2 top-7 left-3 w-auto group-focus-within:text-red-600 ">
Email Address 
</label>
<input type="email" name="first_name" id="first_name" class="h-8 text-[11px]text-10  bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact@gmail.com" />

<div class="relative z-0  px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold  text-[11px]  text-gray-900 dark:text-gray-300
bg-white relative px-1  top-2 left-3 w-auto group-focus-within:text-red-600 ">
Email Address 
</label>
<input type="email" name="first_name" id="first_name" class="h-8 text-10  bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact@gmail.com" />

<div class="relative z-0  px-2 w-full group">
<label for="first_name" class="font-mono uppercase font-bold  text-11  text-gray-900 dark:text-gray-300
bg-white relative px-1 group-focus-within:top-2 top-7 left-3 w-auto group-focus-within:text-red-600 ">
Email Address 
</label>
<input type="email" name="first_name" id="first_name" class="h-8 text-[11px]text-10  bg-gray-50 border py-55-rem border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required="" placeholder="contact@gmail.com" />