虚线边框不能仅靠border-dashed生效，因其只设置border-style: dashed，不指定border-width和border-color时浏览器默认border-width: 0，边框不可见；必须组合如border-2 border-dashed border-gray-300才可见。
虚线边框在 Tailwind 中不能只靠 border-dashed 就生效——它只设 border-style，不自动启用边框。必须同时指定宽度和颜色，否则浏览器默认 border-width: 0，什么也看不到。
为什么加了 border-dashed 却还是实线？
这是最常踩的坑：类名本身不控制边框是否“存在”，只控制“样式”。border-dashed 等价于 border-style: dashed，但 border-width 和 border-color 仍为初始值（0 和 currentColor）。
- 单独写
border-dashed→ 边框不可见 - 正确组合：
border-2 border-dashed border-gray-300 - 方向限定也一样：
border-t-2 border-t-dashed border-t-blue-400（注意border-t-dashed会覆盖border-dashed） - 如果用了
border-2再加border-t-dashed，只有上边是虚线，其余三边保持实线
怎么只让某一边是虚线？
Tailwind 不提供 border-top-dashed 这种类，但支持方向前缀 + 样式组合，且必须成对指定宽、色、型：
-
border-t-2 border-t-dashed border-t-amber-400→ 上边 2px 虚线 -
border-r-1 border-r-dotted border-r-slate-400→ 右边 1px 点线 - 别混用
border-dashed和border-b-dashed：后者优先级更高，且只作用于下边 - 逻辑方向写法也支持：
border-s-dashed（起始侧，LTR 下等同border-l-dashed）
响应式虚线边框怎么写才不漏断点？
Tailwind 的响应式前缀是“最小断点”，sm:border-dashed 表示 ≥640px 时启用虚线，但更小尺寸下若没显式清除，可能继承父级或默认的实线行为。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
border border-dashed sm:border-dashed→ 移动端仍是实线（因为border默认border-style: solid） - 正确写法（例如仅在中屏以上启用虚线）：
border border-solid sm:border-dashed md:border-solid - 想从无线 → 虚线 → 双线切换：
divide-x-0 sm:divide-x-2 sm:divide-dashed lg:divide-double - 检查 DevTools 的 computed styles，确认各断点下
border-style确实按预期变化
dash 长度和间隔能调吗？
不能。Tailwind 的 border-dashed 直接映射 CSS 原生 border-style: dashed，dash 和 gap 长度由浏览器决定，无法通过类名配置。
- Safari 对
border-0.5这类极细虚线渲染不稳定，建议最小用border-1 - 需要自定义节奏（比如密点线、长划线），得放弃原子类：
style="border: 2px dashed #94a3b8; border-radius: 0;" - 装饰性场景可考虑用
bg-gradient+background-clip模拟，但不是真边框，也不响应事件
虚线本身简单，但 Tailwind 的原子化机制会让“只改样式不改宽/色”变成隐形陷阱；真正要控制 dash 细节，就得跳出工具类，直写 CSS —— 这不是退步，而是机制边界所在。
