outline-color

例

基本的な例

outline-rose-500 や outline-lime-100 のようなユーティリティを使用して、要素のアウトラインの色を制御します。

<button class="outline-2 outline-offset-2 outline-blue-500 ...">Button A</button>
<button class="outline-2 outline-offset-2 outline-cyan-500 ...">Button B</button>
<button class="outline-2 outline-offset-2 outline-pink-500 ...">Button C</button>

不透明度を変更する

要素のアウトラインカラーの不透明度を制御するには、カラー不透明度修飾子を使用します。

<button class="outline-2 outline-blue-500/100 ...">Button A</button>
<button class="outline-2 outline-blue-500/75 ...">Button B</button>
<button class="outline-2 outline-blue-500/50 ...">Button C</button>

カスタム値の使用

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

<div class="outline-[#243c5a] ...">
  <!-- ... -->
</div>

CSS変数については、以下も使用できます。 outline-(<custom-property>) 構文

<div class="outline-(--my-color) ...">
  <!-- ... -->
</div>

これは単に outline-[var(<custom-property>)] のショートハンドで、var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスを outline-color ユーティリティ md: のようなブレークポイントバリアントでプレフィックスすると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみになります。

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

バリアントのドキュメントで、バリアントの使用方法の詳細をご覧ください。

テーマのカスタマイズ

--color-* テーマ変数を使用して、以下をカスタマイズします。color プロジェクト内のユーティリティ

@theme {
  --color-regal-blue: #243c5a; 
}

これで outline-regal-blue ユーティリティをマークアップで使用できます。

<div class="outline-regal-blue">
  <!-- ... -->
</div>

テーマのカスタマイズの詳細については、 テーマのドキュメント.