border-dashed 类未生效是因为它仅设置边框样式为虚线，不自动启用边框，必须同时指定 border-width 和 border-color 才可见。
border-dashed 类为什么没生效
常见现象是加了 border-dashed 但边框还是实线，根本原因是它只设置边框线型，不自动启用边框——必须同时指定边框宽度和颜色，否则浏览器默认 border-width: 0，虚线自然不可见。
- 必须搭配
border-{side?}-{width}（如border-2）和border-{color}（如border-gray-300）一起用 - 单独写
border-dashed等价于border-style: dashed，但其他两个基础属性仍为初始值 - 注意：Tailwind 默认不生成
border的 shorthand 类（如border-dashed border-2 border-red-500是安全组合）
虚线边框在不同方向上的控制
想只让上边或右边是虚线？Tailwind 不提供 border-top-dashed 这类原子类，得靠方向前缀 + 样式组合。
- 支持方向限定：用
border-t-dashed、border-r-dashed、border-b-dashed、border-l-dashed - 但同样要配宽度和颜色，例如：
border-t-2 border-t-dashed border-t-blue-400 - 别混用
border-dashed和border-t-dashed，后者会覆盖前者，且仅作用于单边 - 如果用了
border全局类（如border-2），再加border-t-dashed时，只有上边是虚线，其余三边保持实线
dash 长度和间隔无法直接调，但有替代方案
Tailwind 的 border-dashed 对应的是 CSS 原生 border-style: dashed，其 dash 和 gap 长度由浏览器决定，不能通过类名配置。
- 想自定义虚线节奏（比如更密的点线或长划线），必须用
border-image或内联style - 简单做法：用
bg-[length]搭配渐变背景模拟虚线（适合装饰性场景） - 真实需求强定制时，建议直接写 CSS：
border: 2px dashed #94a3b8; border-radius: 0;，避免 Tailwind 的抽象层干扰 - 注意 Safari 对极细虚线（如
border-0.5）渲染不稳定，建议最小用border-1
响应式虚线边框容易漏掉断点重置
加了 sm:border-dashed 后，在小屏下虚线出现，但中屏以上忘了关掉，结果虚线一直存在——这是响应式写法里最常忽略的一环。
- Tailwind 的响应式前缀是“最小断点”，
sm:表示 ≥640px，不是“仅在 sm 下” - 若只想在手机端用虚线，得显式清除：
border-solid sm:border-dashed md:border-solid - 检查 DevTools 中 computed styles，确认
border-style在各断点下是否符合预期 - 别依赖
border-none覆盖，它会清掉整个边框（宽+色+型），可能破坏布局
虚线本身简单，但 Tailwind 的原子化机制会让“只改样式不改宽/色”变成隐形陷阱；真正卡住人的，往往不是不会写，而是忘了它根本不帮你设 border 的基础三要素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
