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

【问题标题】：Tailwind show placeholder on border of input when focused聚焦时，Tailwind 在输入边框上显示占位符
【发布时间】：2022-03-08 13:04:11
【问题描述】：

我正在尝试使用 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"

    />

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

【问题讨论】：

Tailwind 当然可以帮助你，但你也需要一点 JS。 Tailwind 确实有一个表单插件，但不幸的是没有这样做tailwindcss-custom-forms.netlify.app 如果我没记错的话，这个输入焦点模式是材料设计的一部分。

标签： css tailwind-css

【解决方案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" />

@tailwind base;
@tailwind components;
@tailwind utilities;

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com/3.0.23"></script>
<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>
<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>

【讨论】：