outline-width

例

基本的な例

outline または outline-<number> ユーティリティ（outline-2 や outline-4 など）を使用して、要素のアウトラインの幅を設定します。

<button class="outline outline-offset-2 ...">Button A</button>
<button class="outline-2 outline-offset-2 ...">Button B</button>
<button class="outline-4 outline-offset-2 ...">Button C</button>

フォーカス時の適用

プレフィックスan outline-width ユーティリティと、次のようなバリアント： focus:* その状態でのみユーティリティを適用するため。

<button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Save Changes</button>

バリアントのドキュメントで、バリアントの使用方法について詳しく学んでください。

カスタム値の使用

次を使用してください outline-[<value>] 構文 を設定するためにアウトライン幅完全にカスタム値に基づいて

<div class="outline-[2vw] ...">
  <!-- ... -->
</div>

CSS変数の場合は、次も使用できます outline-(length:<custom-property>) 構文

<div class="outline-(length:--my-outline-width) ...">
  <!-- ... -->
</div>

これは単なる省略形です outline-[lengthvar(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスan outline-width ユーティリティ md: のようなブレークポイントバリアントを使用して、ユーティリティを適用するのはミディアム 画面サイズ以上の場合のみです。

<div class="outline md:outline-2 ...">
  <!-- ... -->
</div>

バリアントのドキュメントで、バリアントの使用方法について詳しく学んでください。