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

我正在try 创建一个使用React和Tailwind CSS的注册表.当我将焦点放在一个输入表单上时，标签会向上滑动.在这里之前没有任何问题.然而，当我将焦点放在另一个输入上时，我先前关注的输入的标签变成了占位符.也就是说，向上移动了just的标签返回到其位置.我的代码如下:

<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-within:outline-none focus-within:border-rose-600"
                placeholder=""
                required
              />
              <label
                htmlFor="username"
                className={`absolute left-1 top-2 transition-all text-gray-400 ${formData.username.length > 0 ? 'text-md' : 'text-base'
                  } ${formData.username.length > 0 ? 'text-gray-400' : ''
                  } peer-focus-within:left-0 peer-focus-within:-top-6 peer-focus-within:text-gray-700 peer-focus-within:text-md peer-focus-within:text-bold`}
              >
                Username
              </label>
            </div>

截图

这个问题在第四个屏幕截图中清晰可见.我怎么才能解决这个问题呢？提前谢谢！

我试图使用模板字符串和三元运算符执行一些判断，但仍然无法解决.