ボーダー
要素のアウトラインのスタイルを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
outline-solid | outline-style: solid; |
outline-dashed | outline-style: dashed; |
outline-dotted | outline-style: dotted; |
outline-double | outline-style: double; |
outline-none | outline-style: none; |
outline-hidden | outline: 2px solid transparent; outline-offset: 2px; |
outline-solid や outline-dashed などのユーティリティを使用して、要素のアウトラインのスタイルを設定します
outline-solid
outline-dashed
outline-dotted
outline-double
<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button><button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button><button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button><button class="outline-3 outline-offset-2 outline-double ...">Button D</button>outline-hidden ユーティリティを使用して、フォーカスされた要素のデフォルトのブラウザのアウトラインを非表示にし、強制カラーモードでもアウトラインを保持します。
開発者ツールで forced-colors: active をエミュレートして、動作を確認してみてください。
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />このユーティリティを使用する場合は、アクセシビリティのために独自のフォーカススタイリングを適用することを強くお勧めします。
outline-none ユーティリティを使用して、フォーカスされた要素のデフォルトのブラウザのアウトラインを完全に削除します。
<div class="focus-within:outline-2 focus-within:outline-indigo-600 ..."> <textarea class="outline-none ..." placeholder="Leave a comment..." /> <button class="..." type="button">Post</button></div>このユーティリティを使用する場合は、アクセシビリティのために独自のフォーカススタイリングを適用することを強くお勧めします。
Prefixan outline-style ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するのはmedium 画面サイズ以上のみ
<div class="outline md:outline-dashed ..."> <!-- ... --></div>バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。