用于控制元素边框宽度的功能类。
<div class="border-0 border-indigo-600 ..."></div>
<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 等功能类来设置元素一侧的边框宽度。
<div class="border-t-2 border-fuchsia-600 ..."></div>
<div class="border-r-2 border-fuchsia-600 ..."></div>
<div class="border-b-2 border-fuchsia-600 ..."></div>
<div class="border-l-2 border-fuchsia-600 ..."></div><div class="divide-y divide-light-blue-400 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div></div>
</div>要在特定的断点处控制元素的边框宽度，请在任何现有的边框宽度功能类中添加 {screen}: 前缀。例如，使用 md:border-t-4 来应用 border-t-4 功能类，只适用于中等尺寸以上的屏幕。
<div class="border-2 md:border-t-4 ..."></div>关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。
默认情况下，Tailwind 提供了五个 border-width 功能类，每个边的功能类数量相同（顶部，右侧，底部和左侧）。您可以通过编辑 Tailwind 配置的 theme.borderWidth 部分来改变，添加或删除这些。这一部分的值也将控制哪些功能类将被生成。
// tailwind.config.js
module.exports = {
theme: {
borderWidth: {
DEFAULT: '1px',
'0': '0',
'2': '2px',
+ '3': '3px',
'4': '4px',
+ '6': '6px',
- '8': '8px',
}
}
}默认情况下， 针对 border width 功能类，只生成 responsive 变体。
您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 borderWidth 属性来控制为 border width 功能生成哪些变体。
例如，这个配置也将生成 hover and focus 变体:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ borderWidth: ['hover', 'focus'],
}
}
}如果您不打算在您的项目中使用 border width 功能，您可以通过在配置文件的 corePlugins 部分将 borderWidth property to false in the corePlugins section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ borderWidth: false,
}
}