tailwind 的 border-color 类必须配合 border 或方向类（如 border-t）才能生效，仅用 border-red-500 无效；需同时声明宽度、样式与颜色，如 border border-red-500。
border-color 类名怎么写才生效
Tailwind 的 border-color 类必须配合 border 或具体方向类（如 border-t、border-l）一起用，否则边框根本不会显示。只加 border-red-500 是无效的——它只是设颜色，不设宽度和样式。
-
border border-red-500：最常用，等价于border: 1px solid red -
border-t-2 border-t-blue-400：仅上边框，2px 宽，蓝色 -
border-dashed border-green-600：虚线边框 + 绿色，需同时写样式和颜色
颜色值不生效？检查是否启用了对应色板
Tailwind 默认只生成常用颜色（如 red-500、blue-600），如果你写了 border-emerald-300 却没效果，大概率是 emerald 没在 theme.extend.colors 里配置，或者你用的是旧版 Tailwind（v2.x 不含 emerald）。
- v3.0+ 默认支持
emerald、fuchsia、violet等新色系 - 自定义颜色要显式加到
tailwind.config.js的theme.extend.colors中 - 使用
border-[#ff6b6b]可临时跳过配置，但会禁用 JIT 编译优化，影响构建速度
响应式边框颜色怎么切
响应式前缀（如 md:border-yellow-400）只对已启用的边框起作用，不能单独“切换颜色”而保留原有边框。如果桌面端是 border-blue-500，移动端想变橙色，得写全：
border border-blue-500 md:border-orange-400
- 顺序重要：
md:border-orange-400必须写在border-blue-500后面，否则会被覆盖 - 别漏掉基础边框声明，否则
md:断点内可能连边框都消失 - 若只在某断点需要边框，用
md:border md:border-purple-500，避免默认边框干扰
border-color 和 CSS 变量混用时的坑
直接在 class 里写 border-color: var(--my-border) 不行——Tailwind 不解析 CSS 变量值。想动态控制，得走配置或内联 style。
- 推荐方式：在
tailwind.config.js中用theme.extend.borderColor引入变量，如{"custom": "var(--border-color)"}，再用border-custom - 内联更简单：
className="border" style={{ borderColor: 'var(--border-color)' }}（React 场景） - 注意：CSS 变量未定义时，
border-color会退回到currentcolor或继承值，容易误以为“颜色没变”
border 宽度和样式声明，光改颜色；还有就是响应式类顺序写反，导致颜色切不上去。这些地方没报错，但样式就是不动，得盯紧生成的最终 CSS。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
