daisyUI Divider 组件完全指南：垂直/水平分割、配色与定位用法详解

是 daisyUI 5 提供的轻量级内容分割组件，使用一条自动伸缩的分隔线把相邻的内容块在垂直或水平方向上清晰隔开，并支持在分隔线上放置可选的文本标签。本文将基于官方组件文档与 packages/daisyui/src/components/divider.css 的源码实现，系统讲解 divider 的全部类名（组件类、颜色类、方向类、定位类）、逐场景可复制的 HTML 示例，以及伪元素 + CSS 变量 + oklch 颜色体系背后的实现原理，帮助你直接在 Tailwind CSS + daisyUI 项目中开箱使用与二次定制。

---

1. 什么是 Divider 组件

Divider（分隔线）用于在页面上分隔内容，它既可以垂直分割上下排列的内容，也可以水平分割左右并排的内容。daisyUI 的官方定位是：

Divider will be used to separate content vertically or horizontally.

与普通的 <hr> 或简单的 border 不同，daisyUI Divider 的核心视觉特征是：分隔线由左右两条独立的线段组成，文本默认居中位于两条线段之间，且线段会根据容器自动伸缩（grow），文本两侧还会保留固定的间距，整体观感比单一横线更加精致。

对应组件文档：packages/docs/src/routes/(routes)/components/divider/+page.md/components/divider/+page.md)；组件的完整源码位于 packages/daisyui/src/components/divider.css，由 daisyUI 5 的构建流程从该 CSS 自动产出对应的工具类。

2. Divider 的类名全景

根据组件文档 frontmatter 中登记的 classnames，Divider 组件共由四组类名构成，分组、语义及默认值如下：

分组	类名	说明
component	divider	两条内容之间的分隔线（组件基类）
color	divider-neutral	使用 neutral 色
color	divider-primary	使用 primary 色
color	divider-secondary	使用 secondary 色
color	divider-accent	使用 accent 色
color	divider-success	使用 success 色
color	divider-warning	使用 warning 色
color	divider-info	使用 info 色
color	divider-error	使用 error 色
direction	divider-vertical	垂直分割上下元素（组件默认方向）
direction	divider-horizontal	水平分割左右相邻元素
placement	divider-start	把分隔线文本推到起始位置
placement	divider-end	把分隔线文本推到结束位置

从 frontmatter 中的 default: true 标记可知，divider-vertical 是组件的默认方向，也就是说只写 divider 一个类时就是垂直分割线。

在 Agent/技能侧的速查文档 skills/daisyui/components/divider.md 中同样列出了上述分组规则，并补充了两条使用约束：

• {MODIFIER} 是可选的，且每个方向（direction）、颜色（color）、位置（placement）类别中只能各选一个类名；
• 若想要一条不带文字的分隔线，直接不写任何文字内容即可（留空）。

3. 基础用法：默认垂直分割线

默认场景是上下排列的两个内容块，中间放一条带文字的分隔线。官方示例用两片 card 充当被分隔的内容，核心 HTML 如下：

<div class="flex w-full flex-col">
  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
  <div class="divider">OR</div>
  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
</div>

代码要点：

• 外层容器需要是 flex flex-col（纵向 flex 布局），配合 divider 的 self-stretch 特性让分隔线自动铺满容器宽度；
• 两侧的 card bg-base-300 rounded-box 只是用于演示的被分隔内容，实际使用时可以是任意元素或组件；
• <div class="divider">OR</div> 是组件本体，"OR" 是显示在分隔线中央的文字。

如果你使用了自定义前缀，请在对应配置前缀后把所有组件类都加上前缀（文档代码块中的 $$ 占位符正是前缀占位标记，会在文档站点渲染时被替换成实际前缀值，见 packages/docs/src/lib/actions.svelte.js 中的 replaceAll("$$", prefixValue) 逻辑）。未配置前缀时直接写 divider 即可。

4. 水平分割线：divider-horizontal

当内容左右并排时，应改用 divider-horizontal 让分隔线变成纵向、夹在左右两块之间：

<div class="flex w-full">
  <div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">content</div>
  <div class="divider divider-horizontal">OR</div>
  <div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">content</div>
</div>

与默认场景的差别：

• 外层容器由 flex-col 改为普通 flex（水平排列），同时给两侧内容加上 grow 让它们平分剩余宽度；
• divider 追加 divider-horizontal，此时组件内部会自动切换为 flex-col 方向，两条线段由横向变为纵向，文本仍位于两段之间的中央。

5. 无文字分隔线

不需要任何标签文字时，保留空的 divider 即可。此时组件会隐藏文本所需的 gap，渲染为一条两端延伸的完整线段：

<div class="flex w-full flex-col">
  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
  <div class="divider"></div>
  <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
</div>

从源码看，这条“隐藏逻辑”由 divider.css 中的选择器实现：

&:not(:empty) {
  @apply gap-4;
}

只有存在内容（divider 非空）时才会开启文字与线段之间的 gap-4 间距；空内容时两条伪元素线段通过 w-full 各占一半、中间无缝衔接，看起来就是一条贯穿的直线。

6. 响应式方向切换：lg:divider-horizontal

在实际布局中，更常见的诉求是“小屏垂直分隔、大屏水平分隔”。由于 divider-horizontal 本质上只是 Tailwind 的一个类，因此可以直接叠加响应式前缀，例如在 lg 断点之上切换为水平分割：

<div class="flex w-full flex-col lg:flex-row">
  <div class="card bg-base-300 rounded-box grid h-32 grow place-items-center">content</div>
  <div class="divider lg:divider-horizontal">OR</div>
  <div class="card bg-base-300 rounded-box grid h-32 grow place-items-center">content</div>
</div>

此处外层容器使用 flex-col lg:flex-row，而 divider 使用 divider lg:divider-horizontal：移动端下容器纵向排列、分隔线保持默认垂直形态；达到 lg 断点后容器与分隔线同时切为水平方向。这就是把方向控制类作为普通工具类使用所带来的最大灵活性——任何 Tailwind 的响应式断点变体（sm:、md:、lg: 等）都可以套用在它上面。

7. 为分隔线配色

颜色类会同时作用于分隔线左右两段，覆盖默认的浅灰底色。把同一份 HTML 中的 divider 逐一替换为下述颜色类即可得到完整色板（默认 / neutral / primary / secondary / accent / success / warning / info / error）：

<div class="flex w-full flex-col">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>

在源码实现中，每个颜色类都是通过覆盖两条伪元素线段的 background-color 实现的，例如：

.divider-primary {
  @layer daisyui.l1.l2 {
    &:before,
    &:after {
      @apply bg-primary;
    }
  }
}

neutral / secondary / accent / success / warning / info / error 的实现结构完全相同，只是将 bg-primary 换成对应的主题色工具类（参见 divider.css）。因此颜色类使用的是 daisyUI 主题色板中的语义色，会随当前激活主题自动变化，无需你手动指定具体色值。

8. 文本位置控制：divider-start / divider-end

默认情况下文本居中显示。若希望文本贴靠某一侧，使用 divider-start（文本居左 / 靠起点）或 divider-end（文本居右 / 靠终点）：

8.1 垂直方向下的文本位置

<div class="flex w-full flex-col">
  <div class="divider divider-start">Start</div>
  <div class="divider">Default</div>
  <div class="divider divider-end">End</div>
</div>

8.2 水平方向下的文本位置

将位置类与 divider-horizontal 叠加，即可控制纵向分隔线中文本的上下位置：

<div class="flex w-full justify-center">
  <div class="divider divider-horizontal divider-start">Start</div>
  <div class="divider divider-horizontal">Default</div>
  <div class="divider divider-horizontal divider-end">End</div>
</div>

实现上这两个类非常“取巧”：divider-start 直接隐藏了左侧（::before）线段，divider-end 直接隐藏了右侧（::after）线段，从而让文本视觉上被推到对应一侧：

.divider-start:before {
  @layer daisyui.l1.l2 {
    @apply hidden;
  }
}

.divider-end:after {
  @layer daisyui.l1.l2 {
    @apply hidden;
  }
}

参见 divider.css。因为只保留了一段可伸缩的线段，配合外层 flex 容器与 gap-4，剩余线段仍会 grow 填满空白区域。

9. 组合使用规则小结

综合上述场景，一个完整的 divider 类名可以同时携带“方向 + 颜色 + 位置”三类修饰符，例如：

<div class="divider divider-horizontal divider-primary divider-end">Continue</div>

合法组合的约束只有一条（同样见于 skills/daisyui/components/divider.md）：同一类别内只能选一个——即方向只能从 vertical/horizontal 中选一个，颜色只能从 8 个颜色类中选一个，位置只能从 start/end 中选一个。这与文档示例中把 divider-horizontal 与 divider-start/divider-end 叠加的用法一致。

10. 源码级实现原理

如果希望深入理解组件行为甚至自定义样式，建议精读整个 packages/daisyui/src/components/divider.css。下面是几个值得注意的实现细节：

10.1 基于 flex 与两条伪元素线段

基础样式 divider 定义了组件的骨架：

.divider {
  @layer daisyui.l1.l2.l3 {
    @apply flex h-4 flex-row items-center self-stretch whitespace-nowrap;
    margin: var(--divider-m, 1rem 0);
    --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);

    &:before,
    &:after {
      content: "";
      @apply h-0.5 w-full grow;
      background-color: var(--divider-color);
    }
    @media print {
      &:before,
      &:after {
        border: 0.5px solid;
      }
    }

    &:not(:empty) {
      @apply gap-4;
    }
  }
}

• 组件本身是 flex h-4 flex-row items-center self-stretch 的一行，高度固定为 h-4（1rem），线段不是真正的元素，而是 ::before / ::after 两条 h-0.5 w-full grow 的伪元素，w-full + grow 使其能随容器伸缩；
• 线段默认颜色来自自定义属性 --divider-color，其值是用 CSS color-mix(in oklab, ...) 在 oklab 色彩空间下将主题文字色 --color-base-content 与透明色按 10% / 90% 混合出的浅色，因此能自动适配任意明暗主题；
• 源码注释特别说明，之所以引入 --divider-color 变量而非直接写 background，是为了规避 Tailwind CSS issue #17556 中伪元素在媒体查询下被错误合并的 bug，这是一个值得在自定义组件时借鉴的工程细节；
• 额外提供了 @media print 打印兜底，在打印环境下用 0.5px solid 描边替代背景色渲染，保证打印输出仍有清晰线段；
• 外边距由变量 --divider-m 控制（默认 1rem 0），方向类正是通过改写该变量来切换留白方向。

10.2 方向类通过变量与自身覆盖实现

divider-horizontal 与 divider-vertical 虽然默认方向是垂直，但在源码里两者都显式写全了自己的方向，以确保与语义一致：

.divider-horizontal {
  @layer daisyui.l1.l2 {
    --divider-m: 0 1rem;
    &.divider {
      @apply h-auto w-4 flex-col;
      &:before, &:after { @apply h-full w-0.5; }
    }
  }
}

即水平模式将外边距改为 0 1rem（上下 0、左右 1rem）、容器变为 h-auto w-4 flex-col，两条伪元素变成 h-full w-0.5 的细长竖线；而 .divider-vertical 则相反，显式回归 --divider-m: 1rem 0 与 flex-row、横线形态。需要留意：这些样式写在 .divider-horizontal/.divider-vertical 上，并带有 &.divider 的嵌套限定，说明方向类只有在与组件基类 divider 同用时才生效。

10.3 层叠样式层级（daisyui.l1.l2.l3）

所有规则都包裹在 @layer daisyui.l1.l2.l3（基类）与 @layer daisyui.l1.l2（修饰类）中，这是 daisyUI 5 的级联层（cascade layers）体系，用于精确控制组件样式、颜色工具类与用户自定义样式之间的优先级，避免 @apply 与 !important 之间出现无谓的层叠冲突。若你在自己的 Tailwind 配置里调整了层叠顺序，应保持 divider 相关规则仍处于 daisyUI 的层组内。

11. 与主题系统的联动

从上面的实现可以看到，divider 的所有“默认观感”都不是硬编码色值，而是经由主题变量与 oklch 颜色体系联动：

• 默认线段颜色 = color-mix(in oklab, var(--color-base-content) 10%, transparent)；
• 各颜色类 = 直接 @apply bg-<语义色>（如 bg-primary、bg-error），而这些语义色在主题文件中以 oklch 定义（例如 light 主题中 --color-primary: oklch(45% 0.24 277.023)、--color-neutral: oklch(14% 0.005 285.823)，见 packages/daisyui/src/themes/light.css）。

这带来的实际收益是：切换主题（如 light ↔ dark）或自定义主题色时，divider 默认线与彩色线都会自动跟随新主题渲染，不需要额外改 CSS。若想全局微调分隔线粗细或默认颜色，可分别在 :root/主题层上覆盖 --divider-m、--divider-color 等自定义属性。

12. 延伸阅读

围绕 Divider 组件，可在仓库内进一步查看以下材料：

• 组件文档源文件：packages/docs/src/routes/(routes)/components/divider/+page.md/components/divider/+page.md)
• 组件源码（含全部类与注释）：packages/daisyui/src/components/divider.css
• Agent 速查卡（类名分组与使用规则）：skills/daisyui/components/divider.md
• 同目录下其他组件文档（如 tooltip、collapse、toast 等）：packages/docs/src/routes/(routes)/components/components)
• 所有组件源码统一存放目录：packages/daisyui/src/components

掌握 divider 后，你会发现它特别适合用在“登录/注册切换”“列表与详情分组”“设置项分区”“图文之间的 OR/AND 语义分割”等场景中；配合响应式方向切换与颜色类，即可在不写一行自定义 CSS 的情况下完成大多数内容分隔需求。