ReactJS+TailwindCSS输入框标签失焦回落问题解决求助

你的问题根源在于输入框有内容但失焦时，缺少维持标签上浮的样式规则，同时输入框未配置placeholder导致内容状态判断失效，具体修正方案如下：

关键修改点 #

1. 给输入框添加placeholder=" "（空格占位符），确保:placeholder-shown伪类能正确识别输入框是否有内容
2. 在标签的peer-[:not(:placeholder-shown)]样式组中补充bottom-[45px]，让输入框有内容时，无论是否聚焦，标签都保持上浮位置
3. 修正无效状态的样式拼写错误（原text-roseoutline-[#CB5353]存在语法错误）

修正后的完整代码 #

const MyApp = () => {
  return(
    <div>
      <label className="relative flex min-h-10">
        {/* 添加空格占位符，让placeholder-shown伪类正常工作 */}
        <input
          placeholder=" "
          className={
            "flex flex-1 p-2 bg-white disabled:bg-[#9b9b9b] text-black transition-[outline-color] peer py-3 outline outline-1 outline-gray-400 rounded-md peer placeholder:text-transparent focus-within:outline-2 focus-within:outline-black focus-within:placeholder:text-gray-400 aria-[invalid=true]:outline-2 aria-[invalid=true]:outline-rose-600 disabled:opacity-50 disabled:cursor-not-allowed focus:text-[#205FF3] focus:outline-[#205FF3]"
          }
        />
        <span
          className={
            `bottom-[22px] disabled:bg-transparent peer-focus:bottom-[45px]  
            flex absolute h-full items-center rounded-md py-0 px-1 mx-2 cursor-text transition-all  text-gray-400 outline-gray-400
            peer-focus:h-1   peer-focus:text-sm peer-focus:rounded-none peer-focus:text-[#205FF3] peer-focus:outline-black
            // 补充bottom属性，确保有内容时标签保持上浮
            peer-[:not(:placeholder-shown)]:bottom-[45px] peer-[:not(:placeholder-shown)]:h-1   peer-[:not(:placeholder-shown)]:text-sm peer-[:not(:placeholder-shown)]:rounded-none
            // 修正拼写错误，统一无效状态文字颜色
            peer-aria-[invalid=true]:text-[#CB5353] aria-[invalid=true]:peer-focus:text-[#CB5353] aria-[invalid=true]:text-[#CB5353]
          `}
        >
          Username
        </span>
      </label>
    </div>
  );
}

修改后效果：

• 输入框为空且失焦：标签回落至输入框内
• 输入框聚焦或已有内容：标签保持上浮状态

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