border-t和border-b必须搭配宽度类（如border-t-2）才生效，因方向类本身无默认宽度；单独使用不显示边框，且需显式设置样式与颜色才可见。
border-t 和 border-b 必须搭配宽度类才生效
单独写 border-t 或 border-b 不会显示边框——它们只声明“作用方向”，不带宽度值。Tailwind 默认的 border 类隐含 1px 宽度，但方向类（border-t、border-b 等）本身没有默认宽度，必须显式组合数字类，比如 border-t-2、border-b-4。
常见错误是写成：border-t border-red-500，结果没线条。这是因为 border-t 编译为 border-top-width: 1px 的前提是它被定义在配置中作为 DEFAULT；但 Tailwind v3.3+ 默认已移除该隐式行为，实际依赖 theme.borderWidth.DEFAULT 配置项，而多数项目并未设置，所以更稳妥的做法是始终带数字：
-
border-t-2→border-top-width: 2px -
border-b（仅当配置了DEFAULT: '1px'才有效，不推荐依赖） -
border-b-0→ 明确清除底部边框，比border-b-transparent更可靠
border-t-2 和 border-b-2 的实际渲染差异
两者在 DOM 层级上互不影响，但视觉表现受父容器 padding/margin 和相邻元素影响明显。例如：
用 border-b-2 做标题下划线时，若没加 pb-1，文字可能紧贴线条，显得拥挤；而 border-t-2 用于卡片顶部装饰时，若父容器有 pt-4，线条会离上边缘更远。
- 底部边框常配合
pb-{n}控制文字与线的距离（如border-b pb-2） - 顶部边框适合做分隔线，但要注意是否被父容器
overflow: hidden裁掉（尤其圆角容器内） - 二者都支持暗色模式变体：如
border-b-gray-300 dark:border-b-gray-700
border-t 和 border-b 混用时的层叠顺序陷阱
同一个元素同时写 border-t-4 border-b-2 没问题，因为控制的是不同方向的 CSS 属性（border-top-width 和 border-bottom-width），不会冲突。但容易踩坑的是颜色覆盖：
- 如果先写
border-t-blue-500，再写border-t-red-400，后者生效 —— 同方向重复声明时，后写的覆盖前写的 - 但
border-t-blue-500 border-b-red-400可以共存，各自独立 - 别用
border-t-2 border-b-2 border-rose-500：最后这个border-rose-500会重置所有四边颜色，导致上下边框都变粉红
border-b 常见误用：当成“分割线”却撑开布局
很多人用 border-b 替代 hr，但忘了边框本身占空间。例如一个 flex 容器里放两个 div，第二个加了 border-b-2，它高度会多出 2px（除非设 box-border，而 Tailwind 默认就是），可能破坏等高对齐。
- 真正轻量的分割线建议用
h-px bg-gray-200（1px 高 div）+my-1，不依赖 border 机制 - 若坚持用
border-b，记得检查是否需要mb-0抵消额外空间 - 在表单或列表中，
border-b配合last:border-b-0是安全做法，避免末尾多一条线
border-t、border-b）编译后生成的是标准 CSS 的 border-top / border-bottom 属性，它们天然支持 border-style（如 dashed），但如果你写了 border-t-dashed 却没写宽度，依然看不到——样式存在，只是宽度为 0。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
