border-0.5 失效因浏览器兼容性差，ios 8+ safari 支持 0.5px 边框但多数 android、旧 ios 和部分 chrome 不支持；应改用伪元素 + scaley(0.5) 模拟，避免 border-solid 覆盖宽度，注意任意值语法和真机渲染陷阱。
直接用 border-0.5 会失效，原因不是配置没加，而是浏览器不认
在 iOS 8+ Safari 中，border-width: 0.5px 是原生支持的；但绝大多数 Android 浏览器、iOS 7 及更早版本、甚至部分桌面 Chrome（尤其非 Retina 屏）会直接忽略它，渲染成 0px。Tailwind 的 border-0.5 类只是把 CSS 写成 border-width: 0.5px，它本身不解决兼容性问题——它只负责“写出来”，不负责“能显示”。
所以即使你在 tailwind.config.js 里正确扩展了 borderWidth：
theme: {
extend: {
borderWidth: { '0.5': '0.5px' }
}
}
仍需搭配运行时检测或降级方案，否则在大量真机上就是“看不见的线”。
推荐做法：用伪元素 + transform: scaleY(0.5) 模拟
这是目前兼容性最好、控制最稳的方案，不依赖设备像素比判断，也不影响布局流。核心是放弃直接设 border，改用 ::after 绘制 1px 元素再垂直缩放。
-
position: relative在父容器上，确保伪元素能绝对定位 -
::after设height: 1px、background-color（不用border）、transform: scaleY(0.5) -
transform-origin: top或bottom，避免缩放后偏移（常用top配border-b效果） - 若要适配暗色模式，直接在伪元素里用
dark:bg-gray-700类（需启用 JIT 编译）
示例（底部细线）：
<div class="relative h-12"> <div class="absolute bottom-0 left-0 right-0 h-px bg-black dark:bg-gray-700 origin-top [&]:scale-y-50"></div> </div>
注意：[&]:scale-y-50 是 Tailwind 3.3+ 支持的变体语法，等价于写一个独立类；如用旧版，建议抽成自定义工具类。
Tailwind 中 border-solid 不该乱用
很多人加 border-solid 是为了“确保边框是实线”，但它在 Tailwind 里是冗余且危险的：
-
border、border-b等工具类默认就带border-style: solid，显式加border-solid不改变行为 - 更关键的是：
border-solid会重置border-width为1px，覆盖你之前写的border-b-0.5或border-b-[0.5px] - 如果你看到细线突然变粗，大概率是某处误加了
border-solid或其他 style 类
真正需要控制“线条感”的，是组合：border-b + 显式宽度（如 border-b-[0.5px]） + 语义色（如 border-gray-200 dark:border-gray-700） + 确保父容器无 overflow: hidden（否则 0.5px 可能被裁掉）。
要不要开 experimental: { optimizeUniversalDefaults: true }？
这个配置会影响 border-b-[0.5px] 这类任意值的解析效率，但不开它，border-b-[0.5px] 依然可用——前提是你的 Tailwind 版本 ≥ 3.0 且启用了 JIT 模式。
不过要注意两点：
-
border-b-[0.5px]是任意值语法，必须在content扫描路径中真实出现，否则不会生成对应 CSS - 某些构建工具（如 Vite + CSS minifier）可能把
0.5px压缩成.5px，导致 Safari 解析失败；建议在配置中禁用单位压缩，或统一用border-b-0.5（配合borderWidth扩展）
真正容易被忽略的点是：0.5px 线条对父容器的 transform 和 will-change 敏感。如果父元素有 transform: translateZ(0) 或 will-change: transform，某些安卓 WebView 会模糊或吞掉这条线——这种问题只能靠真机调试暴露，模拟器看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
