input加shadow-sm无效是因为其为inline元素，需设display:block或inline-block；focus:ring与shadow-sm不冲突但视觉臃肿，建议聚焦时用focus:shadow-md；移动端需确保viewport配置正确且真机测试。
input 元素加 shadow-sm 为什么没效果
因为 shadow-sm 默认只对块级元素或设置了 display: block 的元素生效，而原生 <input> 是 inline-level 元素，box-shadow 不会渲染在它身上（尤其在某些浏览器中）。
- 必须显式设置
display: block或inline-block，推荐block配合宽度控制 - 确保没有其他样式（比如重置 CSS 中的
box-shadow: none）覆盖了 Tailwind 的阴影类 - 如果用了自定义
input组件（如 React 封装），要确认 class 是透传到真实<input>上，而不是仅作用在父容器
focus:ring 和 shadow-sm 同时用会冲突吗
不会冲突，但视觉上可能“叠在一起”显得臃肿——focus:ring 是环形焦点框，shadow-sm 是底部/四周投影，两者叠加后阴影区域变厚、边缘发虚，尤其在深色模式下容易糊成一团。
- 默认
focus:ring带outline: none，所以不会出现双轮廓；但若手动加了outline，就得自己清掉 - 更干净的做法是：去掉
shadow-sm，改用focus:shadow-md或focus:shadow-lg，让阴影只在聚焦时出现 - 如果坚持常驻阴影 + 聚焦高亮，建议调低
focus:ring-opacity-50并用focus:ring-blue-400这类浅色 ring，避免压过阴影层次
移动端 focus:ring 看不见？
部分 iOS Safari 和旧版 Android 浏览器对 input 的 :focus 样式支持不稳定，特别是当页面有 viewport 缩放或使用了 user-scalable=no 时，focus:ring 可能完全不触发。
- 必须确保
<meta name="viewport">包含width=device-width, initial-scale=1，且没禁用缩放 - iOS 上
input聚焦时会自动放大，可能把 ring 挤出视口；加focus:outline-none防止原生放大行为干扰 - 真机测试比模拟器靠谱，尤其是 iOS 16+ 对
focus-visible更敏感，可考虑换用focus-visible:ring替代focus:ring
阴影太淡或太重怎么调
Tailwind 的 shadow-* 类是预设组合（box-shadow 的 x y blur spread color），不能微调单个参数。想改深浅，只能换类或写自定义 CSS。
立即学习“前端免费学习笔记（深入）”；
-
shadow-sm：模糊半径 1px，适合轻量提示；shadow（中等）、shadow-md（较明显）更常用 - 深色背景上
shadow-sm几乎不可见，建议搭配shadow-gray-800/20这类带透明度的颜色变体 - 需要精确控制？在
tailwind.config.js的theme.boxShadow里加自定义值，比如'custom': '0 1px 3px -1px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.06)'
真正麻烦的是阴影和 focus ring 在不同设备、不同输入方式（鼠标 vs 触摸 vs 键盘 tab）下的表现不一致——别指望一套 class 通吃，得按场景切。
