React Native中Tailwind的border-b与border-dashed样式无法显示问题

• 首先明确：React Native环境下的Tailwind依赖nativewind实现，原生Tailwind CSS不支持RN，别混淆两者。
• 直接写border-b border-dashed不显示的核心原因：RN的边框虚线样式需要配合边框宽度和边框颜色一起设置，且单独指定某边边框时，必须显式绑定该边的所有相关属性。

正确写法示例 #

给底部边框单独指定宽度、样式、颜色：

<View className="border-b-2 border-dashed border-gray-300">
  {/* 组件内容 */}
</View>

原写法失效的细节说明 #

• 仅写border-b时，nativewind默认对应border-b-0（宽度为0），没有宽度的边框自然无法显示，必须显式声明border-b-[x]指定宽度，比如border-b-1或border-b-2。
• 部分nativewind版本支持更精准的边指定样式，写法如下（兼容性稍差，建议优先用上面的通用写法）：

<View className="border-b border-b-dashed border-b-2 border-gray-300">
  {/* 组件内容 */}
</View>

排查小技巧 #

• 先测试全边框写法：写border-2 border-dashed确认虚线边框能正常显示，再逐步改成仅底部边框，定位问题环节。
• 检查样式覆盖：排查是否有父组件overflow-hidden或自身background-color完全遮挡边框，可临时给组件加p-4拉开距离测试。
• 升级nativewind：旧版本对单独边的样式支持不完善，建议更新到最新稳定版。

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