fill

例

基本的な例

fill-indigo-500 や fill-lime-600 のようなユーティリティを使用して、SVG の fill カラーを変更します。

<svg class="fill-blue-500 ...">
  <!-- ... -->
</svg>

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

現在の色を使用する

fill-current ユーティリティを使用して、fill カラーを現在のテキストカラーに設定します。

<button class="bg-white text-indigo-600 hover:bg-indigo-600 hover:text-white ...">
  <svg class="size-5 fill-current ...">
    <!-- ... -->
  </svg>
  Check for updates
</button>

カスタム値の使用

以下を使用します。 fill-[<value>] 構文 を設定するにはfill カラー完全にカスタムな値に基づいて

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

CSS 変数の場合は、以下も使用できます。 fill-(<custom-property>) 構文

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

これは単なる省略記法で、 fill-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa fill ユーティリティ を md: のようなブレークポイントバリアントでプレフィックスすると、ユーティリティが適用されるのはmedium スクリーンサイズ以上のみになります。

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

バリアントの使用に関する詳細は、バリアントのドキュメントをご覧ください。

テーマのカスタマイズ

--color-* テーマ変数を使用して、color プロジェクトのユーティリティ

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

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

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

テーマのカスタマイズに関する詳細は、 テーマのドキュメント.