Vue+TailwindCSS实现date输入框浮动标签时标签始终激活问题

问题根因 #

你遇到的标签始终保持激活状态有两个核心原因：

1. 没有给input元素添加peer类，Tailwind的peer-*系列修饰符需要依赖前置兄弟元素的peer类才能匹配对应状态
2. date类型输入框的原生placeholder-shown伪类表现和普通文本输入框不同：哪怕没有手动赋值，多数浏览器也会内置显示「年/月/日」类的占位文本，不会触发placeholder-shown状态，导致你写的peer-placeholder-shown相关样式始终不生效。

可行解决方案 #

方案1：纯CSS适配（兼容大部分现代浏览器）

修改代码如下：

<div class="relative">
    <!-- 新增peer类、required属性，未选中时默认值为空 -->
    <input 
        id="date-placeholder" 
        type="date" 
        inputmode="date" 
        class="peer focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md"
        required
        value=""
    />
    <label
        for="date-placeholder"
        class="absolute left-3 bg-white -top-2.5 px-1 text-gray-600 text-sm transition-all duration-300 
        /* 未选中值且未聚焦时，标签停在输入框内 */
        peer-invalid:peer-not-focus:text-base peer-invalid:peer-not-focus:text-gray-400 peer-invalid:peer-not-focus:top-2.5
        peer-focus:-top-2.5 peer-focus:text-gray-600 peer-focus:text-sm"
    >
        Test Date
    </label>
</div>

说明：利用required属性下未选中值的date输入框会触发:invalid伪类的特性，替换原来的placeholder-shown判断逻辑。

方案2：结合Vue响应式状态（更稳定，无浏览器兼容问题）

Vue环境下直接用绑定值的状态控制样式更稳妥，可完全避免不同浏览器对date输入框伪类的表现差异：

<template>
<div class="relative">
    <input 
        id="date-placeholder" 
        type="date" 
        inputmode="date" 
        v-model="selectDate"
        @focus="isFocus = true"
        @blur="isFocus = false"
        class="focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md"
    />
    <label
        for="date-placeholder"
        class="absolute left-3 bg-white px-1 transition-all duration-300"
        :class="isFocus || selectDate ? 
        '-top-2.5 text-gray-600 text-sm' : 
        'top-2.5 text-gray-400 text-base'"
    >
        Test Date
    </label>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 日期绑定值
const selectDate = ref('')
// 输入框聚焦状态
const isFocus = ref(false)
</script>

内容的提问来源于stack exchange，提问作者power-cut