divide-y 可为垂直排列的直接子元素自动添加横向分割线，依赖文档流顺序，仅对 flex-col 或 block 流生效；默认用 border-t-gray-200，支持颜色、粗细、虚线等自定义，并需配合 padding 避免视觉拥挤。

使用 divide-y 可以为垂直排列的子元素（比如列表项）自动添加横向分割线，无需手动给每个 <li> 加边框，Tailwind 会智能地在相邻元素之间插入 border。

确保父容器是 flex 或 grid 的垂直流

divide-y 依赖于子元素的**文档流顺序**，只对直接子元素生效，且要求它们是垂直排列（默认块级或 flex-col）。常见适用结构：

• 使用 <ul></ul> 或 <div class="flex flex-col"> 作为父容器<li>子元素必须是直接子节点（不能嵌套在额外的 wrapper div 里）</li> <li>避免用 <code>flex-row 或 grid-cols-* ，否则 divide-y 不起作用

基础写法：直接加 divide-y 类

在父容器上添加 divide-y，Tailwind 默认使用 border-gray-200 和 border-t 实现分隔（即在每个子元素顶部画线，首项无顶线）：


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载

  
• 首页

  
• 关于

  
• 联系



自定义分割线样式

可通过组合类调整颜色、粗细、圆角等：

• divide-y-2：设置 border-width 为 2px（默认是 1px）
• divide-y-blue-400：改为蓝色分割线
• divide-y-dashed：虚线风格（需配合 divide-y）
• divide-y-opacity-30：降低透明度（需启用 opacity 插件）

多个修饰可叠加，例如：class="divide-y divide-y-2 divide-y-gray-300"

注意边界和内边距配合

分割线会紧贴子元素顶部，若想留白，建议给父容器加 py-1 或给子元素加 py-2，避免视觉拥挤：


  
• 产品

  
• 价格