如何在React中使用Tailwind CSS稳定浮动标签？

你的问题核心是：输入框有内容但失去焦点时，标签没能保持上移状态——当前代码只在输入框聚焦时给标签加了位置偏移样式，但输入框有内容时仅调整了字号，没同步修改位置属性。

直接调整标签的样式判断逻辑即可解决：

<div className="relative mb-4">
  <input
    type="text"
    id="username"
    name="username"
    value={formData.username}
    onChange={handleChange}
    className="peer p-3 h-10 w-full border-b-2 border-gray-300 text-gray-900 placeholder-transparent focus:outline-none focus:border-rose-600"
    placeholder=""
    required
  />
  <label
    htmlFor="username"
    className={`absolute left-1 top-2 transition-all text-gray-400 ${
      formData.username.length > 0 || document.activeElement.id === 'username'
        ? 'left-0 -top-6 text-gray-700 text-md font-bold'
        : 'text-base'
    }`}
  >
    Username
  </label>
</div>

关键修改说明： #

• 用formData.username.length > 0 || document.activeElement.id === 'username'作为判断条件，只要输入框有内容或者当前处于聚焦状态，就应用标签上移后的样式
• 把原来分散的peer-focus-within:*样式整合到三元判断中，避免Tailwind peer伪类仅在聚焦时生效的局限
• 简化重复的样式判断，将位置、文字颜色、字号、加粗属性合并为一组样式，减少冗余

另外你原来的focus-within可以改成focus，因为是针对input自身的聚焦状态，用focus:伪类更精准。

内容的提问来源于stack exchange，提问作者periakteon