快速参考

预览 
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-{color} 工具控制元素之间的边框颜色。

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>

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

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

条件应用

悬停、聚焦和其他状态

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

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

有关所有可用状态修饰符的完整列表,请查看 悬停、聚焦和其它状态 文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、prefers-reduced-motion 等等。例如,使用 md:divide-pink-400 仅在中型屏幕尺寸及以上时应用 divide-pink-400 实用程序。

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

要了解更多信息,请查看有关 响应式设计暗模式其它媒体查询修饰符 的文档。


使用自定义值

自定义您的主题

默认情况下,Tailwind 会将整个 默认颜色调色板 作为分隔颜色提供。您可以通过编辑 tailwind.config.js 文件中的 theme.colorstheme.extend.colors自定义您的颜色调色板

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

或者,您可以通过编辑 tailwind.config.js 文件中的 theme.divideColortheme.extend.divideColor 来仅自定义分隔颜色。

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

任意值

如果您需要使用一个不适合包含在主题中的 divide-{color} 值,请使用方括号使用任何任意值动态生成属性。

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

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