ストローク

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

Class reference

Class
Properties
.stroke-currentstroke: currentColor;

使用方法

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

完全にストロークで描画されるFeatherのようなアイコンセットのスタイリングに役立ちます。

<svg class="stroke-current text-purple-500 inline-block h-12 w-12" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="8" cy="21" r="2" />
  <circle cx="20" cy="21" r="2" />
  <path d="M5.67 6H23l-1.68 8.39a2 2 0 0 1-2 1.61H8.75a2 2 0 0 1-2-1.74L5.23 2.74A2 2 0 0 0 3.25 1H1" />
</svg>

Customizing

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'),
+     })
    }
  }

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!