【Tailwind和訳】SVG/Stroke

この記事について

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

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

---

Stroke

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

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

使用法

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

Heroicons のような、完全にストロークで描かれたアイコンセットのスタイリングに便利です。

<svg class="stroke-current text-purple-600 ..."></svg>。

カスタマイズ

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

tailwind.config.js

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

バリアント

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

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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