ストローク幅

Tailwind CSS version
v1.2.0+

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

Class reference

Class
Properties
.stroke-0stroke-width: 0;
.stroke-1stroke-width: 1;
.stroke-2stroke-width: 2;

使用方法

.stroke-{width}ユーティリティを使用して、SVGのストローク幅を設定します。

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

<svg class="stroke-current stroke-1 text-green-500 ..."></svg>
<svg class="stroke-current stroke-2 text-green-500 ..."></svg>

Responsive

特定のブレークポイントでSVG要素のストローク幅を制御するには、既存の幅ユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:stroke-2クラスを要素に追加すると、中程度の画面サイズ以上でstroke-2ユーティリティが適用されます。

Tailwindのレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

<svg class="stroke-1 sm:stroke-2 md:stroke-1 lg:stroke-0 xl:stroke-1 ...">
  <!-- ... -->
</svg>

Customizing

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

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        strokeWidth: {
+         '3': '3',
+         '4': '4',
        }
      }
    }
  }

デフォルトテーマのカスタマイズについてはテーマのカスタマイズをご覧ください。

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!