移动端触摸体验差的根本原因是未满足触控关键约束：点击区≥48×48px、显式声明touch-action、禁用hover依赖active、自定义按钮加role与tabindex、peer-checked菜单结构严格且真机验证。
移动端触摸体验差，不是 Tailwind 写得不对，而是默认类没覆盖触控关键约束：点击区域太小、:active 失效、touch-action 没显式声明、响应式断点用反了。
确保可点击元素 ≥ 48×48px（含 padding）
iOS Safari 和 Android Chrome 都有触控最小尺寸限制，低于约 48×48px 的区域，:active 可能不触发，甚至被跳过。Tailwind 默认的 px-2 py-1 或 text-sm 完全不够。
- 别靠文字撑开尺寸——
font-size: 12px+ 无padding= 实际点击区仍窄于 20px - 显式设
min-w-12 min-h-12（即 48px），比依赖内容更可靠 - 按钮类建议统一写法：
class="px-4 py-3 min-w-12 min-h-12"（px-4≈ 16px，py-3≈ 24px，加起来超 48px） - 对图标按钮，用
flex items-center justify-center+min-w-12 min-h-12，避免文字缺失时尺寸坍缩
慎用 hover，优先用 active 或状态类
移动端没有悬停概念，但 iOS Safari 会在首次点击后模拟一次 :hover，导致按钮“卡在变色态”，第二次才真正响应 click。
- 纯视觉反馈改用
active:scale-95或active:bg-blue-600，它只在按压瞬间生效，不残留 - 如果必须保留悬停效果（如桌面端），用断点隔离：
hover:bg-gray-100 md:hover:bg-gray-50 - 表单控件（如
input）上禁用hover:border，否则获得焦点时颜色突变，干扰用户判断 - 自定义按钮（
div+@click）务必加role="button" tabindex="0"，否则:active在部分 iOS 版本下不触发
给高频点击区加 touch-action: manipulation
这个 CSS 属性能绕过 300ms 点击延迟，但它不继承、不自动生效，必须手动加在具体元素上。
- 原生
<button></button>默认已优化，但一旦重写display（如inline-flex）或覆盖touch-action，就得补回：touch-manipulation（Tailwind v3.4+ 内置）或手写touch-action: manipulation - 自定义点击区（
div.btn、轮播指示点、Tab 标签、弹窗关闭叉）必须单独加，不能靠父容器兜底 - 禁用场景要避开：轮播外层容器、地图容器、横向滚动列表——加了会禁掉
pan-x/pan-y，导致无法拖拽 - 验证是否生效：真机长按按钮约 200ms 后松开，看 click 是否立即执行；DevTools 的 Computed 面板确认
touch-action值为manipulation
用 peer-checked 实现纯 CSS 移动端菜单，别用 JS 切 class
Tailwind 的 peer 类本身不监听 click，强行用 JS 改 checkbox 的 checked 状态会导致动画中断、焦点丢失、iOS 闪动。
- 结构必须是：
<input type="checkbox" id="menu" class="peer sr-only">→<label for="menu"></label>→<nav class="peer-checked:xxx"></nav>，三者同级且顺序严格 - 隐藏 checkbox 用
sr-only（视觉隐藏但保留在可访问流中），不能用hidden或display: none - 菜单过渡必须写在
<nav></nav>上：transition-all duration-300，否则peer-checked:translate-y-0切换无动画 - iOS Safari 闪动常见原因是
max-h-0→max-h-96切换时高度重排，改用max-h-0 overflow-hidden+peer-checked:max-h-96更稳
最易被忽略的是：所有这些优化都依赖真实设备验证。模拟器看不出 :active 是否触发、测不出 300ms 延迟是否消失、也复现不了 iOS 的 peer 闪动。每次改完，至少拿 iPhone 和 Pixel 真机点三次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
