divide-x 仅触发子元素左侧边框，不控制样式；需配合 divide-dashed 等类设置虚线、点线等，且必须与 divide-x 同时使用，否则无效。
divide-x 本身不控制 border-style，必须组合 divide-dashed 等类
很多人以为 divide-x 能直接设虚线或点线，其实它只触发「在每个子元素左侧加 border-left」这个行为，而 border 的样式（solid/dashed/dotted）默认是 solid，得靠额外的类来覆盖。divide-dashed、divide-dotted、divide-double 才真正改 border-style。单独写 divide-x + border-dashed 是无效的——后者作用在容器上，不是子元素的 left 边框。
-
divide-x divide-dashed→ 每个子元素左侧出现虚线（等价于给每个子项加border-l-[width] border-l-dashed） -
divide-x-2 divide-dotted→ 2px 宽点线，注意divide-x-2控制宽度，divide-dotted控制样式，缺一不可 - 别混用
border-dashed和divide-dashed：前者影响整个元素的 border，后者只影响相邻兄弟间的分割逻辑
为什么写了 divide-dashed 却还是实线？检查是否漏了 divide-x 或布局失效
常见错误是只写 divide-dashed，但没配 divide-x 或 divide-y —— 这类样式类本身不生效，它们只是修饰「已启用的分割线」。另外，如果父容器没设 flex 或 grid，或者子元素之间夹了空格/注释，divide-x 根本不会渲染任何 border，自然也看不到 dashed 效果。
- 确认父容器有
flex或grid（比如flex flex-row或grid grid-cols-3） - 检查 DOM 是否干净：子元素之间不能有换行符、空格或 HTML 注释，否则破坏相邻兄弟关系
- 避免和
columns-3这类多列 CSS 混用——divide-x对 column-based 布局完全无效
响应式下虚线只在桌面显示，必须带断点前缀重写整套类
不能只写 md:divide-dashed，因为 divide-x 默认是 solid，移动端仍会显示实线。要让「无线 → 有虚线」切换，得把启用、宽度、颜色、样式全部带上断点前缀。
- 错的：
divide-x md:divide-dashed→ 移动端是divide-x（solid 实线），桌面才变虚线 - 对的：
divide-x-0 sm:divide-x-2 sm:divide-gray-300 sm:divide-dashed→ 移动端无线，sm 起才有 2px 灰色虚线 - 如果还要在 lg 上改成双线：
divide-x-0 sm:divide-x-2 sm:divide-gray-300 sm:divide-dashed lg:divide-double
自定义颜色或线宽时，注意 divide-{color} 和 divide-{size} 的优先级
divide-gray-300 不是简单设 border-color，而是作用于所有子元素的 border-left-color；同理 divide-x-4 等价于每个子元素的 border-left-width: 4px。它们必须写在同一元素上，且顺序无关——Tailwind 会按规则合并生成 CSS。
- 不要分开写：
divide-x-2在一个组件，divide-blue-500在另一个——后者不会生效 - 自定义颜色需先在
tailwind.config.js的theme.extend.colors中注册，才能用divide-custom-blue - 若想某条线更粗但其他保持默认，只能放弃
divide-x，改用border-r手动加在特定子元素上
<div> 之间只多了一个换行，<code>divide-x 就可能失效——这不是 bug，是 CSS 相邻兄弟选择器的天然限制。
