Tailwind的border类宽度源自theme.borderWidth配置，默认DEFAULT为1px，预设如border-2对应2px；需显式设置样式（如border-solid）和颜色才可见，方向类须与数字类组合使用。
border类的宽度值从哪来
Tailwind 默认的 border 类（如 border、border-t）用的是 1px，它来自 borderWidth 配置里的 DEFAULT 值。想改全局默认，得去 tailwind.config.js 里动 theme.borderWidth.DEFAULT；但更常用的是直接选预设宽度类——比如 border-2 是 2px，border-4 是 4px，border-8 是 8px。
这些数字类不是随便定的：它们对应 theme.borderWidth 中定义的键值对，默认是 { DEFAULT: '1px', '0': '0', '2': '2px', '4': '4px', '8': '8px' }。如果项目里需要 3px 或 6px，不扩展配置就写不出来。
- 直接改配置可加自定义值，比如加
'3': '3px'，之后就能用border-3 - 别依赖
border-[3px]这种 arbitrary value（除非开了content安全白名单且配了experimental.optimizeUniversalDefaults: true），生产环境容易漏生成 -
border-x/border-y类只控制左右或上下，宽度仍由后续数字类决定，比如border-x-4→ 左右各4px
border-t/border-r这类方向类怎么设不同宽度
方向类本身不带宽度，必须和数字类组合使用，顺序无关，但建议数字类放后面便于扫读，比如 border-t-2、border-r-4。注意：没有 border-t-2-4 这种“顶部2px、右侧4px”的简写，Tailwind 不支持单个 class 控制多个方向的不同宽度。
真要差异化设置，只能拆开写：border-t-2 border-r-4 border-b-0 border-l-8。这时候要注意 CSS 层叠顺序——后写的会覆盖同属性的前写，但因为是不同方向，其实互不影响。
- 方向类 + 数字类是原子组合，
border-t-2编译出来就是border-top-width: 2px - 别试图用
border-t-2 border-t-4覆盖，后者会生效，前者无效——这不是 bug，是预期行为 - 如果大量用非对称边框，考虑抽成 @layer components 里的自定义 class，避免模板里堆太长
为什么加了border却看不见
最常见原因是没设边框颜色或样式。border 类只设宽度，不设 border-style 和 border-color。没样式（none 是默认值）或颜色是透明/和背景同色，边框就不可见。
必须显式加上 border-solid（或 border-dashed 等）和颜色类，比如 border border-solid border-gray-300。也可以用快捷组合类，像 border-gray-300 本身就含 border-solid 和颜色，但依然要配宽度类，否则还是 0px。
-
border-gray-300≠border border-gray-300：前者宽度是1px，后者宽度是0（因为border单独出现才设宽度） - 检查 computed styles 时，重点看
border-top-width、border-top-style、border-top-color三项是否都非空/有效 - 深色模式下，
border-gray-200在暗背景里可能对比度太低，肉眼难辨，换border-gray-700试试
自定义宽度要改配置还是用inline style
小范围临时调整，比如某个卡片边框想用 3px，又不想污染全局配置，优先用 border-[3px]（arbitrary value）。但得确认两件事：一是 Tailwind 版本 ≥ 3.0，二是 content 配置里包含了当前文件路径，否则这个 class 不会被扫描生成。
如果项目中 3px 出现频次高（比如设计系统规范要求），那就该进 tailwind.config.js 扩展 theme.borderWidth，加一条 '3': '3px'。这样既保证类型安全，又避免任意值带来的构建体积不可控风险。
- 任意值写法在开发时方便，但上线前务必确认 PurgeCSS 没把它干掉
- 别在
borderWidth里加带单位的字符串以外的值，比如'hairline': '1px'可以，但'thick': 'revert'会导致 build 失败 - 修改配置后记得重启 dev server，热更新不感知
tailwind.config.js变更
真正卡住人的往往不是“怎么加边框”，而是“为什么加了没反应”——八成栽在样式、颜色、单位三者缺一上。多看浏览器开发者工具里那三条 border-* 属性，比查文档快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
