塗りつぶし

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

Class reference

Class
Properties
.fill-currentfill: currentColor;

使用方法

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

完全に塗りつぶしで描画されるZondiconsのようなアイコンセットのスタイリングに役立ちます。

<svg class="fill-current text-teal-500 inline-block h-12 w-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
</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'),
+     })
    }
  }

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはfill utilitiesのために作られます。

あなたはどのバリアントがfill utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのfillプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     fill: ['responsive'],
+     fill: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしfill utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのfill propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!