Border Width 边框宽度
控制元素边框宽度的实用工具。
| Class | Properties |
|---|
基本用法
所有边框
使用 border ， border-0 ， border-2 ， border-4 或 border-8 实用程序来设置元素所有边框的宽度。
border
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>单面边框
使用 border-{side} ， border-{side}-0 ， border-{side}-2 ， border-{side}-4 或 border-{side}-8 实用程序来设置元素一侧的边框宽度。
border-t-4
border-r-4
border-b-4
border-l-4
<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} 实用程序同时设置元素两侧的边框宽度。
border-x-4
border-y-4
<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>使用逻辑属性
使用 border-s-* 和 border-e-* 实用程序来设置 border-inline-start-width 和 border-inline-end-width 逻辑属性，这些属性根据文本方向映射到左侧或右侧边框。
Left-to-right
Right-to-left
<div dir="ltr">
<div class="border-s-4 ..."></div>
<div>
<div dir="rtl">
<div class="border-s-4 ..."></div>
<div></div>
</div>
</div>
</div>为了更好地控制，您还可以使用 LTR 和 RTL 修饰符，有条件地应用特定样式，具体取决于当前的文本方向。
不使用预检
如果您在项目中禁用了预检查，那么每次使用 border-width 边框工具时，实际上都需要包含边框样式实用程序才能生效：
<div class="border-4 border-indigo-500 ...">
<div class="border-4 border-solid border-indigo-500 ...">
<!-- ... -->
</div>
</div>这是因为浏览器默认将大多数元素的 border-style 设置为 none ，因此单独添加 border-width 并不足以渲染边框。
预检应用全局边框重置，将 border-style 设置为 solid ，将 border-width 设置为 0 ，这样就可以在使用预飞的项目中仅使用 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} 值，可以使用方括号来根据任意值动态生成属性。
<p class="border-t-[3px]">
<!-- ... -->
</p>有关任意值支持的更多信息，请参阅任意值文档。