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

Quick reference

类
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 > * + *

基本用法

¥Basic usage

设置分割颜色

¥Setting the divide color

使用 divide-* 工具来控制元素之间的边框颜色。

¥Use the divide-* utilities to control the border color between elements.

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

改变透明度

¥Changing the opacity

使用颜色透明度修饰符来控制分割颜色的透明度。

¥Use the color opacity modifier to control the opacity of the divide color.

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

你可以使用 透明度比例 中定义的任何值，或者如果你需要偏离你的设计令牌，则可以使用任意值。

¥You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<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>

有关所有可用状态修饰符的完整列表，请查看悬停、聚焦、以及其他状态 文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、首选减少运动等。例如，使用 md:divide-pink-400 仅在中等屏幕尺寸及以上时应用 divide-pink-400 工具。

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

要了解更多信息，请查看有关 响应式设计、暗黑模式、以及 其他媒体查询修饰符 的文档。

使用自定义值

¥Using custom values

自定义主题

¥Customizing your theme

默认情况下，Tailwind 将整个 默认调色板 用作 divide 颜色。你可以通过在 tailwind.config.js 文件中编辑 theme.colors 或 theme.extend.colors 来 自定义调色板。

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

或者，你可以通过在 tailwind.config.js 文件中编辑 theme.divideColor 或 theme.extend.divideColor 来仅自定义 divide 颜色。

在 主题自定义 文档中了解有关自定义默认主题的更多信息。

任意值

¥Arbitrary values

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

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

在 任意值 文档中了解有关任意值支持的更多信息。