tailwind css 官方不支持 row-span 工具类，需用 display: contents、原生 rowspan 属性或 css grid 实现跨行效果，第三方插件存在兼容性与响应式限制。
row-span 在 Tailwind 中根本不存在
Tailwind CSS 默认不提供 row-span 这类工具类。你看到的 row-span-2 或类似写法，是某些第三方插件（比如 tailwindcss-rowspan）添加的扩展，不是官方能力。原生 Tailwind 从 v3.0 到 v4.x 都没内置表格行合并支持。
原生方案只能靠 inline display: contents
要实现视觉上的“跨行”，最稳妥、无需插件的方式是用 CSS 的 display: contents 配合语义化 HTML 结构。它让父元素（如 <tr>）不参与渲染布局，但保留子元素（<code><td>）的表格行为 —— 这样你就能把多个 <code><td> 拼成一个逻辑“跨行单元”。
<p>常见错误是直接在 <code><td> 上加 <code>rowspan 属性却忘了同步调整后续行的单元格数量，导致表格错位。正确做法：
- 手动在 HTML 中写原生
rowspan属性（如<td rowspan="3">…</td>） - 确保被跨过的那些行中，对应列位置不再放
<td>，否则会多出一列 <li>如果用 React/Vue，注意动态生成时 <code>rowspan值和后续行的<td> 数量必须严格匹配 <h3>用 grid 替代 table 实现更灵活的“跨行”效果</h3> <p>如果你真正需要的是“内容纵向铺满多行”的视觉效果，而非语义化表格（比如数据报表），用 <code>grid往往更可控。例如：<div class="grid grid-cols-4 gap-2"> <div class="col-span-1 row-span-3 bg-gray-100">跨三行</div> <div>A1</div> <div>B1</div> <div>C1</div> <div>A2</div> <div>B2</div> <div>C2</div> </div>
注意：
row-span-3在这里生效的前提是容器设了grid+ 明确行数（如grid-rows-5）或靠内容撑开。否则 Grid 不知道“行”在哪，row-span会被忽略。插件方案的风险点：维护性与构建体积
引入
tailwindcss-rowspan类插件确实能生成row-span-2等类名，但它依赖 PostCSS 插件解析自定义语法，并在构建时注入 CSS 规则。容易踩的坑包括：- 升级 Tailwind 后插件未同步更新，导致
@apply报错或类名不生成 - 插件只处理
<td> 和 <code><th>，对 <code><div role="cell"> 这类 ARIA 表格无效 <li>生成的 CSS 是固定值（如 <code>grid-row: span 2），无法响应式（没有sm:row-span-2）
真正难的不是怎么写
row-span，而是判断当前场景是否真的需要语义化表格 —— 大多数所谓“跨行需求”，其实只是布局错觉。 - 升级 Tailwind 后插件未同步更新，导致
