Tailwind CSS 線條厚度

線條厚度

用于設(shè)置 SVG 元素線條厚度(Stroke Width)的功能類。

使用

使用 ?stroke-{width}? 功能類來設(shè)置 SVG 的線條厚度。

對于像 Heroicons 這樣完全用線條(strokes)繪制的圖標集來說很有用。

<svg class="stroke-current stroke-1 text-green-600 ..."></svg>
<svg class="stroke-current stroke-2 text-green-600 ..."></svg>

響應(yīng)式

要在特定的斷點處控制 SVG 元素的 stroke width，可以在任何現(xiàn)有的寬度功能類中添加 ?{screen}:? 前綴。例如，添加類 ?md:stroke-2? 到一個元素中，就會在中等屏幕尺寸及以上時應(yīng)用 ?stroke-2? 功能類。

<svg class="stroke-1 md:stroke-2 ...">
  <!-- ... -->
</svg>

關(guān)于 Tailwind 的響應(yīng)式設(shè)計功能的更多信息，請查看響應(yīng)式設(shè)計文檔。

自定義

通過在您的 ?tailwind.config.js? 文件中自定義 ?theme.strokeWidth? 部分來控制 Tailwind 產(chǎn)生的線條寬度。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        strokeWidth: {
         '3': '3',
         '4': '4',
        }
      }
    }
  }

在定制主題文檔中了解更多關(guān)于定制默認主題的信息。

變體

默認情況下， 針對 stroke-width 功能類，只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?strokeWidth ?屬性來控制為 stroke-width 功能生成哪些變體。

例如，這個配置也將生成 hover and focus 變體:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       strokeWidth: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的項目中使用 stroke-width 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?strokeWidth ?屬性設(shè)置為 ?false ?來完全禁用它們：

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