Tailwind CSS 中不存在 border-collapse 工具类，需直接通过内联 style 或自定义 CSS 设置；推荐在 @layer base 中全局声明 table { border-collapse: collapse; }，因其原生高效且语义正确。
border-collapse 在 Tailwind 中根本不存在
Tailwind CSS 没有提供 border-collapse 对应的 utility class。这不是遗漏，而是设计选择：Tailwind 默认不生成表格相关样式，border-collapse 属于原生 CSS 表格布局控制属性，需直接写在 HTML 或 CSS 中。
常见错误现象是试图搜索 border-collapse-collapse 或 table-border-collapse，结果一无所获；或者强行用 border-0 + divide-y 模拟，导致单元格边框错位、重复或响应失效。
使用场景仅限于真实 <table> 元素（非 div 模拟表格），且必须控制单元格边框是否合并（collapse）或分离（separate）。
如何在 Tailwind 项目中正确设置 border-collapse
直接在 HTML 的 <table> 标签上添加内联 style，或在自定义 CSS 中声明。这是最轻量、最可靠的方式。
立即学习“前端免费学习笔记（深入）”；
- 内联写法（适合单处快速控制）：
<table style="border-collapse: collapse;"> - 全局统一（推荐）：在
src/css/app.css或@layer base中加：@layer base { table { border-collapse: collapse; } } - 若需支持
separate或动态切换，不要依赖 JS 操作 class，直接用style.borderCollapse = 'separate'或className切换（React/Vue 中）
为什么不用 Tailwind 的 border 相关类模拟 collapse 效果
因为模拟不可靠，且破坏语义和可维护性：
-
border类（如border、border-gray-300）作用于整个元素盒模型，无法消除相邻单元格之间的双倍边框间距 -
divide-x/divide-y只适用于 flex 容器，对<table>无效；强行套用会破坏表格结构 - 手动给每个
<td>加border-b-0border-r-0等，代码冗长，且在响应式重排或 colspan/rowspan 场景下极易出错 - 性能上无优势：原生
border-collapse是浏览器底层优化过的渲染逻辑，CSS 模拟反而增加绘制层和重排开销
兼容性和实际注意事项
border-collapse: collapse 在所有现代浏览器中完全支持（包括 Safari 15.4+），但有两个容易被忽略的点：
- 它只对
display: table及其子元素（table-row、table-cell等）生效；用flex或grid模拟表格时，该属性无效 - 当表格含
border-spacing（对应 Tailwind 的space-x/space-y）时，border-collapse: collapse会无视该值；而separate下border-spacing才起作用 - 如果用了
ring类（如ring-1），它会绕过border-collapse独立绘制，可能遮盖或错位——此时应移除ring，改用原生border
真正要处理的，从来不是“怎么用 Tailwind 实现 border-collapse”，而是“要不要用原生 table”——一旦选了 table，就别绕弯子。
