divide-x 和 divide-y 是在相邻兄弟元素间插入边框的布局控制类，需父容器为 flex/grid 且子元素严格相邻才生效；它们仅控制 border-left/top 的有无，线型、宽度、颜色须配合修饰类使用。
divide-x 和 divide-y 不是“加边框”的快捷方式，而是「在相邻兄弟元素之间插入边框」的布局逻辑控制类。它只在父容器启用 flex 或 grid、且子元素严格相邻（无空格/换行/注释）时才生效。
为什么写了 divide-y 却没看到线？
常见原因不是类写错了，而是布局前提没满足：
- 父容器缺少
flex或grid类（比如只写了divide-y但容器是默认block） - 子元素之间有 HTML 换行或空格：
<div>A</div>\n<div>B</div>→ 破坏相邻兄弟关系，divide-y失效 - 用了
columns-3或flow-root等非标准流布局，divide类完全不适用 - 子元素被包裹在额外的
<div> 或条件渲染节点中（如 React 的 Fragment），导致实际 DOM 中不相邻 <h3> <code>divide-x和divide-y控制什么，不控制什么？divide-x只在每个子元素左侧添加border-left，divide-y只在每个子元素顶部添加border-top——它们本身不决定线型、宽度或颜色，只是触发这个行为：- 线型必须用
divide-solid/divide-dashed/divide-dotted显式声明；单独写divide-x默认是实线 - 宽度由
divide-x-2这类数字类控制，不是border-2（后者作用于整个元素） - 颜色用
divide-gray-300，它等价于给所有受影响的 border 边设置border-color，不是全局 color -
divide-x和border-l-dashed完全不同：后者是直接给单个元素设左虚线，前者是批量控制兄弟间逻辑分隔
响应式下怎么让分隔线“从无线变虚线”？
不能只给样式加断点前缀，必须把「启用」+「宽度」+「颜色」+「线型」全部带上断点——因为未加前缀的部分仍会生效：
立即学习“前端免费学习笔记（深入）”；
- 错的：
divide-y md:divide-dashed→ 移动端是divide-y（实线），桌面才虚线 - 对的：
divide-y-0 sm:divide-y sm:divide-y-2 sm:divide-gray-300 sm:divide-dashed→ 移动端无线，sm 起才有 2px 灰色虚线 - 如果还要在
lg上改双线：divide-y-0 sm:divide-y-2 sm:divide-gray-300 sm:divide-dashed lg:divide-double
最易忽略的一点：
divide-dashed这类修饰类本身不生效，它必须和divide-x或divide-y同时出现，且 DOM 结构干净、布局模式匹配，否则就是白写。 - 线型必须用
