border-0.5类在真机失效是因浏览器不支持0.5px，仅iOS 8+ Safari原生支持；Chrome、多数Android WebView及iOS 7-忽略该值渲染为0px；iPhone上border-b-1显粗是DPR映射导致逻辑1px=2或3物理像素；::after+scaleY(0.5)是最稳方案，需relative定位、height:2px、transform-origin:bottom且避免冗余border-solid。
border-0.5 类在真机上失效不是配置问题，而是浏览器根本不认这个值。
直接写 border-b-[0.5px] 为什么多数安卓和旧 iOS 看不见？
因为 border-width: 0.5px 只在 iOS 8+ Safari 中原生支持；Chrome（尤其非 Retina 屏）、绝大多数 Android WebView、iOS 7 及更早版本会直接忽略它，渲染成 0px。Tailwind 的 border-0.5 或 border-b-[0.5px] 只是把这行 CSS 写出来，并不解决底层兼容性——它负责“输出”，不负责“生效”。
为什么 border-b-1 在 iPhone 上看起来像 2px？
这不是 Tailwind 的 bug，是 CSS 像素映射机制导致的：
- DPR=2（如 iPhone 8）时，1px CSS 像素 = 2 物理像素
- DPR=3（如 iPhone 14 Pro）时，1px CSS 像素 = 3 物理像素
所以你写的从来不是“物理 1px”，只是“逻辑 1px”。模拟器里看着正常，真机上就变粗甚至发虚。
用 ::after + scaleY(0.5) 是目前最稳的方案
核心不是“缩放”，而是可控地生成物理 1px 线条：
- 宿主元素必须加 relative
- ::after 设 height: 2px + background-color（不用 border-color）
- 必须显式写 transform-origin: bottom，否则缩放后线条会上移，脱离底部边界
- transform: scaleY(0.5) 后，2px → 1 物理像素，且不依赖设备像素比检测
- 示例（底部细线）：
<div class="relative"><br> <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-300 origin-bottom [&]:scale-y-50"></div><br></div>
容易踩的坑：别乱加 border-solid
border-solid 在 Tailwind 中默认已启用，显式加上不仅冗余，还会重置 border-width 为 1px，覆盖掉你精心写的 border-b-[0.5px] 或 border-b-0.5。
真正需要的是：
- 组合使用 border-b + 显式宽度（如 border-b-[0.5px]）
- 配合语义色（如 border-gray-200 dark:border-gray-700）
- 确保父容器没设 overflow 裁剪伪元素
真正难的不是写代码，是记住：所有“细线”类都只在特定设备上起效，而真机渲染永远比 DevTools 模拟更诚实。
