Tailwind响应式/状态类失效：移动端focus不生效问题求助

小屏focus状态不生效的修复 #

你的focus状态不生效是因为<figure>标签默认不属于可聚焦元素（仅链接、表单控件等默认支持focus），无法触发focus样式。解决方法是给<figure>添加tabindex="0"属性，让它成为可聚焦元素，同时可自定义聚焦轮廓样式避免默认边框影响美观。

修改后的核心代码：

<div class="max-w-sm bg-white border border-gray-200 rounded-lg">
    <!-- 添加tabindex="0"，并通过focus:outline-none去掉默认聚焦轮廓 -->
    <figure class="relative w-full transform transition duration-300 focus:scale-105 focus:outline-none lg:hover:scale-105 overflow-hidden group" tabindex="0">
        ...................... Some Image ....................
        <figcaption class="absolute w-full px-6 py-2 pt-6 rounded-b-lg text-white bottom-0 transform translate-y-36 transition duration-300 group-focus:translate-y-0 lg:group-hover:translate-y-0">
            ................. Headings and paragraphs and stuff ..........................
        </figcaption>
    </figure>  
</div>

移动端替代hover的实用方案 #

除了focus，还有这些更适配移动端的交互方案：

• 点击切换状态：通过JavaScript监听元素的click事件，给元素添加/移除自定义类（比如active），控制样式变化。这种方式比focus更稳定，状态可保持到下一次点击。
• 长按触发：监听touchstart和touchend事件，设置定时器，当长按时间达到阈值（比如500ms）时触发交互效果，适合区分普通点击和深层操作的场景。
• 视口自动触发：当元素滚动进入用户视口时，通过JS自动添加样式类，展示原本hover的效果，适合引导用户关注页面内容。
• 滑动交互：设计上下/左右滑动的操作逻辑，比如向上滑动卡片显示隐藏的详情区域，贴合移动端的滑动操作习惯。

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