边框(border)宽度

此类工具用于设置页面元素的边框(border)宽度。

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

通过 .border{-side?}{-width?} 语法为页面元素设置边框(border)宽度。

例如,.border 将为页面元素的每个边都设置宽度为 1px 的边框,而 .border-b-4 将为页面元素的底部设置宽度为 4px 的边框。

类(Class)
边框(border)
(可选)
  所有 (默认值)
t
r
b
l
宽度 (optional)
0 0px
  1px (默认值)
2 2px
4 4px
8 8px

自定义

Responsive and State Variants

By default, only responsive variants are generated for border width utilities.

You can control which variants are generated for the border width utilities by modifying the borderWidths property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

{
// ...
modules: {
    // ...
-   borderWidths: ['responsive'],
+   borderWidths: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
}
}

Disabling

If you don't plan to use the border width utilities in your project, you can disable them entirely by setting the borderWidths property to false in the modules section of your config file:

{
// ...
modules: {
    // ...
-   borderWidths: ['responsive'],
+   borderWidths: false,
}
}