边框宽度

​基本用法

​所有边

使用 border、border-0、border-2、border-4 或 border-8 实用程序为元素的所有边设置边框宽度。

<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div><div class="border border-sky-500"></div>
<div class="border-2 border-sky-500"></div>
<div class="border-4 border-sky-500"></div>
<div class="border-8 border-sky-500"></div>

​单个边框

使用 border-{side}、border-{side}-0、border-{side}-2、border-{side}-4 或 border-{side}-8 实用程序来设置元素某一边的边框宽度。

<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>

​水平和垂直边框

使用 border-{x|y}-{width} 实用程序来同时设置元素两边的边框宽度。

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>

​元素之间的边框

您还可以使用 divide-{x/y}-{width} 和 divide-{color} 实用程序在子元素之间添加边框。

<div class="divide-y divide-slate-200 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div><div class="divide-y divide-slate-700 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

在 分割宽度 和 分割颜色 文档中了解更多信息。

​使用逻辑属性

使用 border-s-* 和 border-e-* 实用程序来设置 border-inline-start-width 和 border-inline-end-width 逻辑属性，它们映射到左或右边框，具体取决于文本方向。

<div dir="ltr">
  <div class="border-s-4 ..."></div>
<div>

<div dir="rtl">
  <div class="border-s-4 ..."></div>
<div>

为了获得更多控制，您还可以使用 LTR 和 RTL 修饰符 根据当前文本方向有条件地应用特定样式。

​不使用 Preflight

如果您已在项目中 禁用 Preflight，则需要在使用 border-width 实用程序时包含一个 边框样式 实用程序，以使边框实际生效。

<div class="border-4 border-indigo-500 ...">
<div class="border-4 border-solid border-indigo-500 ...">
  <!-- ... -->
</div>

这是因为浏览器默认将大多数元素的 border-style 设置为 none，因此仅添加 border-width 不足以呈现边框。

Preflight 应用了一个全局 边框重置，将 border-style 设置为 solid，将 border-width 设置为 0，这使得在使用 Preflight 的项目中，只需使用 border-width 实用程序即可为元素添加边框。

​有条件地应用

​悬停、焦点和其他状态

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

<div class="border-2 hover:border-t-4">
  <!-- ... -->
</div>

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

​断点和媒体查询

您也可以使用变体修饰符来定位媒体查询，例如响应式断点、暗黑模式、 prefers-reduced-motion 等等。例如，使用 md:border-t-4 仅在中等屏幕尺寸及以上应用 border-t-4 实用程序。

<div class="border-2 md:border-t-4">
  <!-- ... -->
</div>

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

​使用自定义值

​自定义主题

默认情况下，Tailwind 提供五个 border-width 实用程序，以及每边相同数量的实用程序（水平、垂直、顶部、右侧、底部和左侧）。您可以通过编辑 Tailwind 配置文件的 theme.borderWidth 部分来更改、添加或删除这些实用程序。

module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

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

​任意值

如果您需要使用一次性的border-{side}-{width}值，而该值不适合包含在您的主题中，请使用方括号使用任何任意值动态生成属性。

<div class="border-t-[3px]">
  <!-- ... -->
</div>

了解更多关于在任意值文档中使用任意值的信息。