stroke-width

stroke-width

SVG要素のストローク幅をスタイルするためのユーティリティ。

クラススタイル

クラス	スタイル
`stroke-<number>`	`stroke-width: <number>;`
`stroke-(length:<custom-property>)`	`stroke-width: var(<custom-property>);`
`stroke-[<value>]`	`stroke-width: <value>;`

stroke-<number>

stroke-width: <number>;

stroke-(length:<custom-property>)

stroke-width: var(<custom-property>);

stroke-[<value>]

stroke-width: <value>;

例 Examples

`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()` 関数を自動的に追加します。

プレフィックスに `stroke-width` ユーティリティ `md:` のようなブレークポイントバリアントを付けて、ユーティリティを適用するのはミディアムスクリーンサイズ以上の場合のみです。

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

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。