Tailwind CSS home page
  1. 边框
  2. 分割颜色

Quick reference

Class
Preview 
divide-inherit > * + *
divide-current > * + *
divide-transparent > * + *
divide-black > * + *
divide-white > * + *
divide-slate-50 > * + *
divide-slate-100 > * + *
divide-slate-200 > * + *
divide-slate-300 > * + *
divide-slate-400 > * + *
divide-slate-500 > * + *
divide-slate-600 > * + *
divide-slate-700 > * + *
divide-slate-800 > * + *
divide-slate-900 > * + *
divide-slate-950 > * + *
divide-gray-50 > * + *
divide-gray-100 > * + *
divide-gray-200 > * + *
divide-gray-300 > * + *
divide-gray-400 > * + *
divide-gray-500 > * + *
divide-gray-600 > * + *
divide-gray-700 > * + *
divide-gray-800 > * + *
divide-gray-900 > * + *
divide-gray-950 > * + *
divide-zinc-50 > * + *
divide-zinc-100 > * + *
divide-zinc-200 > * + *
divide-zinc-300 > * + *
divide-zinc-400 > * + *
divide-zinc-500 > * + *
divide-zinc-600 > * + *
divide-zinc-700 > * + *
divide-zinc-800 > * + *
divide-zinc-900 > * + *
divide-zinc-950 > * + *
divide-neutral-50 > * + *
divide-neutral-100 > * + *
divide-neutral-200 > * + *
divide-neutral-300 > * + *
divide-neutral-400 > * + *
divide-neutral-500 > * + *
divide-neutral-600 > * + *
divide-neutral-700 > * + *
divide-neutral-800 > * + *
divide-neutral-900 > * + *
divide-neutral-950 > * + *
divide-stone-50 > * + *
divide-stone-100 > * + *
divide-stone-200 > * + *
divide-stone-300 > * + *
divide-stone-400 > * + *
divide-stone-500 > * + *
divide-stone-600 > * + *
divide-stone-700 > * + *
divide-stone-800 > * + *
divide-stone-900 > * + *
divide-stone-950 > * + *
divide-red-50 > * + *
divide-red-100 > * + *
divide-red-200 > * + *
divide-red-300 > * + *
divide-red-400 > * + *
divide-red-500 > * + *
divide-red-600 > * + *
divide-red-700 > * + *
divide-red-800 > * + *
divide-red-900 > * + *
divide-red-950 > * + *
divide-orange-50 > * + *
divide-orange-100 > * + *
divide-orange-200 > * + *
divide-orange-300 > * + *
divide-orange-400 > * + *
divide-orange-500 > * + *
divide-orange-600 > * + *
divide-orange-700 > * + *
divide-orange-800 > * + *
divide-orange-900 > * + *
divide-orange-950 > * + *
divide-amber-50 > * + *
divide-amber-100 > * + *
divide-amber-200 > * + *
divide-amber-300 > * + *
divide-amber-400 > * + *
divide-amber-500 > * + *
divide-amber-600 > * + *
divide-amber-700 > * + *
divide-amber-800 > * + *
divide-amber-900 > * + *
divide-amber-950 > * + *
divide-yellow-50 > * + *
divide-yellow-100 > * + *
divide-yellow-200 > * + *
divide-yellow-300 > * + *
divide-yellow-400 > * + *
divide-yellow-500 > * + *
divide-yellow-600 > * + *
divide-yellow-700 > * + *
divide-yellow-800 > * + *
divide-yellow-900 > * + *
divide-yellow-950 > * + *
divide-lime-50 > * + *
divide-lime-100 > * + *
divide-lime-200 > * + *
divide-lime-300 > * + *
divide-lime-400 > * + *
divide-lime-500 > * + *
divide-lime-600 > * + *
divide-lime-700 > * + *
divide-lime-800 > * + *
divide-lime-900 > * + *
divide-lime-950 > * + *
divide-green-50 > * + *
divide-green-100 > * + *
divide-green-200 > * + *
divide-green-300 > * + *
divide-green-400 > * + *
divide-green-500 > * + *
divide-green-600 > * + *
divide-green-700 > * + *
divide-green-800 > * + *
divide-green-900 > * + *
divide-green-950 > * + *
divide-emerald-50 > * + *
divide-emerald-100 > * + *
divide-emerald-200 > * + *
divide-emerald-300 > * + *
divide-emerald-400 > * + *
divide-emerald-500 > * + *
divide-emerald-600 > * + *
divide-emerald-700 > * + *
divide-emerald-800 > * + *
divide-emerald-900 > * + *
divide-emerald-950 > * + *
divide-teal-50 > * + *
divide-teal-100 > * + *
divide-teal-200 > * + *
divide-teal-300 > * + *
divide-teal-400 > * + *
divide-teal-500 > * + *
divide-teal-600 > * + *
divide-teal-700 > * + *
divide-teal-800 > * + *
divide-teal-900 > * + *
divide-teal-950 > * + *
divide-cyan-50 > * + *
divide-cyan-100 > * + *
divide-cyan-200 > * + *
divide-cyan-300 > * + *
divide-cyan-400 > * + *
divide-cyan-500 > * + *
divide-cyan-600 > * + *
divide-cyan-700 > * + *
divide-cyan-800 > * + *
divide-cyan-900 > * + *
divide-cyan-950 > * + *
divide-sky-50 > * + *
divide-sky-100 > * + *
divide-sky-200 > * + *
divide-sky-300 > * + *
divide-sky-400 > * + *
divide-sky-500 > * + *
divide-sky-600 > * + *
divide-sky-700 > * + *
divide-sky-800 > * + *
divide-sky-900 > * + *
divide-sky-950 > * + *
divide-blue-50 > * + *
divide-blue-100 > * + *
divide-blue-200 > * + *
divide-blue-300 > * + *
divide-blue-400 > * + *
divide-blue-500 > * + *
divide-blue-600 > * + *
divide-blue-700 > * + *
divide-blue-800 > * + *
divide-blue-900 > * + *
divide-blue-950 > * + *
divide-indigo-50 > * + *
divide-indigo-100 > * + *
divide-indigo-200 > * + *
divide-indigo-300 > * + *
divide-indigo-400 > * + *
divide-indigo-500 > * + *
divide-indigo-600 > * + *
divide-indigo-700 > * + *
divide-indigo-800 > * + *
divide-indigo-900 > * + *
divide-indigo-950 > * + *
divide-violet-50 > * + *
divide-violet-100 > * + *
divide-violet-200 > * + *
divide-violet-300 > * + *
divide-violet-400 > * + *
divide-violet-500 > * + *
divide-violet-600 > * + *
divide-violet-700 > * + *
divide-violet-800 > * + *
divide-violet-900 > * + *
divide-violet-950 > * + *
divide-purple-50 > * + *
divide-purple-100 > * + *
divide-purple-200 > * + *
divide-purple-300 > * + *
divide-purple-400 > * + *
divide-purple-500 > * + *
divide-purple-600 > * + *
divide-purple-700 > * + *
divide-purple-800 > * + *
divide-purple-900 > * + *
divide-purple-950 > * + *
divide-fuchsia-50 > * + *
divide-fuchsia-100 > * + *
divide-fuchsia-200 > * + *
divide-fuchsia-300 > * + *
divide-fuchsia-400 > * + *
divide-fuchsia-500 > * + *
divide-fuchsia-600 > * + *
divide-fuchsia-700 > * + *
divide-fuchsia-800 > * + *
divide-fuchsia-900 > * + *
divide-fuchsia-950 > * + *
divide-pink-50 > * + *
divide-pink-100 > * + *
divide-pink-200 > * + *
divide-pink-300 > * + *
divide-pink-400 > * + *
divide-pink-500 > * + *
divide-pink-600 > * + *
divide-pink-700 > * + *
divide-pink-800 > * + *
divide-pink-900 > * + *
divide-pink-950 > * + *
divide-rose-50 > * + *
divide-rose-100 > * + *
divide-rose-200 > * + *
divide-rose-300 > * + *
divide-rose-400 > * + *
divide-rose-500 > * + *
divide-rose-600 > * + *
divide-rose-700 > * + *
divide-rose-800 > * + *
divide-rose-900 > * + *
divide-rose-950 > * + *

基础用法

设置分隔线颜色

使用 divide-* 实用程序来控制元素之间的边框颜色。

01
02
03
<div class="divide-y divide-blue-200">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

更改不透明度

使用颜色不透明度修改器来控制分隔颜色的不透明度。

01
02
03
<div class="divide-y-4 divide-slate-400/25 ...">
  <!-- ... -->
</div>

您可以使用 opacity scale 中定义的任何值，或者如果您需要偏离设计令牌，则可以使用任意值。

<div class="divide-y-4 divide-slate-400/[.24] ...">
  <!-- ... -->
</div>

有条件申请

悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:divide-pink-400 来仅 在 hover应用 divide-pink-400.

<div class="divide-y divide-teal-400 hover:divide-pink-400">
  <!-- ... -->
</div>

详细了解, 请参考 Hover, Focus, & Other States 文档.

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:divide-pink-400 来应用 divide-pink-400 程序，适用于中等屏幕尺寸及以上。

<div class="divide-y divide-teal-400 md:divide-pink-400">
  <!-- ... -->
</div>

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.

使用自定义值

定制你的主题

By default, Tailwind makes the entire default color palette available as divide colors. You can customize your color palette by editing theme.colors or theme.extend.colors in your tailwind.config.js file.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      },
    }
  }
}

Alternatively, you can customize just your divide colors by editing theme.divideColor or theme.extend.divideColor in your tailwind.config.js file.

Learn more about customizing the default theme in the theme customization documentation.

任意值

如果您需要使用一次性的 divide color值，而该值没有必要包含在主题中，请使用方括号动态生成属性，使用任意值。

<div class="divide-[#243c5a]">
  <!-- ... -->
</div>

进一步了解，请参考 任意值 文档.