ストローク

例

基本的な例

stroke-indigo-500 や stroke-lime-600 のようなユーティリティを使用して、SVG のストローク色を変更します。

<svg class="stroke-cyan-500 ...">
  <!-- ... -->
</svg>

Heroicons のようなアイコンセットのスタイル設定に役立ちます。

現在の色を使用する

stroke-current ユーティリティを使用して、ストローク色を現在のテキストの色に設定します。

<button class="bg-white text-pink-600 hover:bg-pink-600 hover:text-white ...">
  <svg class="size-5 stroke-current ..." fill="none">
    <!-- ... -->
  </svg>
  Download file
</button>

カスタム値の使用

以下を使用します ストローク-[<value>] 構文 を設定するにはストローク色完全にカスタムの値に基づいて

<svg class="stroke-[#243c5a] ...">
  <!-- ... -->
</svg>

CSS 変数の場合、以下も使用できます ストローク-(<custom-property>) 構文

<svg class="stroke-(--my-stroke-color) ...">
  <!-- ... -->
</svg>

これは単に ストローク-[var(<custom-property>)] の省略形であり、var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa stroke ユーティリティ を md: のようなブレークポイントバリアントでプレフィックスして、ユーティリティを適用するタイミングをmedium スクリーンサイズ以上のみに限定します。

<svg class="stroke-cyan-500 md:stroke-cyan-700 ...">
  <!-- ... -->
</svg>

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

テーマのカスタマイズ

--color-* テーマ変数を使用して、以下をカスタマイズしますcolor プロジェクト内のユーティリティ

@theme {
  --color-regal-blue: #243c5a; 
}

これで ストローク-regal-blue ユーティリティをマークアップで使用できます。

<svg class="stroke-regal-blue">
  <!-- ... -->
</svg>

テーマのカスタマイズの詳細については、 テーマのドキュメント.