原生Tailwind CSS如何为hover触发的display属性添加显示延迟

可以通过原生Tailwind CSS实现该需求。
出现内容提前显示的核心原因是display属性不属于可过渡属性，只要group-hover状态触发就会立刻切换显示状态，无法遵循过渡延迟规则，因此需要替换为支持过渡的可见性属性组合，配合延迟配置即可实现效果。

修改后的HTML代码 #

<!--Sidebar-->
<div class="group w-16 bg-blue-700 hover:w-44 transition-all duration-300">Sidebar
    <div>Item 1
        <span class="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150 group-hover:delay-300 delay-0">Item 1: Details</span>
    </div>
    <div>Item 2
        <span class="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-150 group-hover:delay-300 delay-0">Item 2: Details</span>
    </div>
</div>

属性说明：

• 用opacity-0 invisible替代hidden：两个属性均支持过渡效果，同时invisible可以避免透明状态的内容被误点或选中
• transition-all duration-300：侧边栏展开/收起的过渡时长，可根据需求调整
• group-hover:delay-300：hover触发后延迟300ms再显示内容，刚好和侧边栏的展开时长对齐，等侧边栏完全拓宽后再显示内容
• delay-0：鼠标移出侧边栏时，内容立刻开始隐藏，避免侧边栏已经开始收窄时内容还残留显示

调整tailwind.config.js配置 #

如果使用Tailwind 2.x版本，需要在variants中新增对应属性的group-hover变体支持，3.x及以上版本默认支持无需额外配置：

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {},
    extend: {},
    variants: {
        extend: {
            width: ['hover'],
            transitionDelay: ['group-hover'],
            opacity: ['group-hover'],
            visibility: ['group-hover'],
        },
    },
    plugins: [],
}

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