stroke-width

範例

基本範例

使用 stroke-<number> 實用工具，例如 stroke-1 和 stroke-2 來設定 SVG 的筆畫寬度

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

這對於樣式化圖示集（如 Heroicons）很有用。

使用自訂值

使用 stroke-[<value>] 語法 來設定筆畫寬度基於完全自訂的值

<div class="stroke-[1.5] ...">  <!-- ... --></div>

對於 CSS 變數，您也可以使用 stroke-(length:<custom-property>) 語法

<div class="stroke-(length:--my-stroke-width) ...">  <!-- ... --></div>

這只是 stroke-[lengthvar(<custom-property>)] 的簡寫，它會自動為您新增 var() 函數。

響應式設計

前綴a stroke-width 實用工具 帶有像 md: 這樣的斷點變體，以便僅在中等 螢幕尺寸及以上套用該實用工具

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

請在變體文件中了解更多關於使用變體的資訊。