Tailwind CSS on GitHub

边框厚度

用于控制元素边框宽度的功能类。

Default class reference

Class
Properties
border-0border-width: 0px;
border-2border-width: 2px;
border-4border-width: 4px;
border-8border-width: 8px;
borderborder-width: 1px;
border-t-0border-top-width: 0px;
border-r-0border-right-width: 0px;
border-b-0border-bottom-width: 0px;
border-l-0border-left-width: 0px;
border-t-2border-top-width: 2px;
border-r-2border-right-width: 2px;
border-b-2border-bottom-width: 2px;
border-l-2border-left-width: 2px;
border-t-4border-top-width: 4px;
border-r-4border-right-width: 4px;
border-b-4border-bottom-width: 4px;
border-l-4border-left-width: 4px;
border-t-8border-top-width: 8px;
border-r-8border-right-width: 8px;
border-b-8border-bottom-width: 8px;
border-l-8border-left-width: 8px;
border-tborder-top-width: 1px;
border-rborder-right-width: 1px;
border-bborder-bottom-width: 1px;
border-lborder-left-width: 1px;

所有边

使用 border, .border-0, .border-2, .border-4, 或 .border-8 等功能类来设置一个元素所有边框的宽度。

.border-0
.border
.border-2
.border-4
.border-8
<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 等功能类来设置元素一侧的边框宽度。

.border-t-2
.border-r-2
.border-b-2
.border-l-2
<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>

元素间

您还可以使用 divid-{x/y}-{width}divid-{color} 功能类在子元素之间添加边框。

更多信息请参见分割宽度分割颜色文档。

1
2
3
<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 属性设置为 false 来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     borderWidth: false,
    }
  }