【Tailwind和訳】SVG/Fill

この記事について

この記事は、SVG/Fillの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

---

Fill

SVG 要素の塗りつぶしをスタイリングするためのユーティリティ。

クラス	プロパティ
fill-current	fill: currentColor;

使い方

fill-current を使用して SVG の塗りつぶし色を現在のテキスト色に設定する。これにより、このクラスと既存のテキストカラーユーティリティを組み合わせることで、要素の塗りつぶし色を簡単に設定できます。

Zondicons のような、全てが塗りつぶしで描かれているアイコンセットのスタイリングに便利です。

<svg class="fill-current text-green-600 ..."></svg>

カスタマイズ

tailwind.config.js ファイルの theme.fill セクションをカスタマイズすることで、Tailwind が生成するフィルユーティリティをコントロールします。

tailwind.config.js

  module.exports = {
    theme: {
-     fill: {
-      current: 'currentColor',
-    }
+     fill: theme => ({
+       'red': theme('colors.red.500'),
+       'green': theme('colors.green.500'),
+       'blue': theme('colors.blue.500'),
+     })
    }
  }

バリアント

デフォルトでは、レスポンシブ・バリアントのみがフィル・ユーティリティー用に生成されます。

tailwind.config.js ファイルの variants セクションの fill プロパティを変更することで、フィルユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定はホバーとフォーカスのバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       fill: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトでフィルユーティリティーを使用する予定がない場合は、設定ファイルの corePlugins セクションで fill プロパティを false に設定することで、完全に無効にすることができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     fill: false,
    }
  }