「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Border Style

Utilities for controlling the style of an element's borders.

Default class reference

Class
屬性
border-solidborder-style: solid;
border-dashedborder-style: dashed;
border-dottedborder-style: dotted;
border-doubleborder-style: double;
border-noneborder-style: none;

Usage

Use border-{style} to control an element’s border style.

.border-solid
.border-dashed
.border-dotted
.border-double
.border-none
<div class="border-solid border-4 border-light-blue-500 ..."></div>
<div class="border-dashed border-4 border-light-blue-500 ..."></div>
<div class="border-dotted border-4 border-light-blue-500 ..."></div>
<div class="border-double border-4 border-light-blue-500 ..."></div>
<div class="border-none border-4 border-light-blue-500 ..."></div>

Responsive

To control the border style of an element at a specific breakpoint, add a {screen}: prefix to any existing border style utility. For example, use md:border-dotted to apply the border-dotted utility at only medium screen sizes and above.

<div class="border-solid md:border-dotted ..."></div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Variants

默認情況下, 只有 響應式 的 border style 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 borderStyle 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       borderStyle: ['responsive', 'hover'],
      }
    }
  }

Disabling

如果你不打算在專案中使用 border style 功能,可以在你的設定檔裡的 corePlugins 屬性中將 borderStyle 設定為 false 來停用功能:

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