リングオフセット幅

​基本的な使用方法

​オフセット幅の設定

ring-offset-{width} ユーティリティを使用して、無地の白いボックスシャドウを追加し、それに伴うアウトラインリングの太さを増やすことで、オフセットをシミュレートします。

<button class="... ring ring-pink-500 ring-offset-0">Button A</button>
<button class="... ring ring-pink-500 ring-offset-2">Button B</button>
<button class="... ring ring-pink-500 ring-offset-4">Button C</button>

​オフセット色の変更

CSSではボックスシャドウを実際にオフセットすることはできないため、親の背景色と一致する無地の色のシャドウを使って偽装する必要があります。デフォルトでは白を使用しますが、異なる背景色の上にリングオフセットを追加する場合は、ring-offset-{color} ユーティリティを使用して親の背景色と一致させる必要があります。

<button class="ring ring-pink-500 ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-900 ...">
  Save Changes
</button>

詳細については、リングオフセットカラー のドキュメントを参照してください。

​条件付き適用

​ホバー、フォーカス、その他の状態

Tailwind を使用すると、バリアント修飾子を使用してさまざまな状態にユーティリティクラスを条件付きで適用できます。たとえば、 ホバー:ring-offset-4 を使用して、ring-offset-4 ユーティリティをホバー.

<button class="ring-2 ring-offset-2 hover:ring-offset-4">
  <!-- ... -->
</button>

使用可能なすべての状態修飾子の完全なリストについては、 ホバー、フォーカス、その他の状態 のドキュメントを参照してください。

​ブレークポイントとメディアクエリ

バリアント修飾子を使用して、レスポンシブブレークポイント、ダークモード、prefers-reduced-motion など、メディアクエリをターゲットにすることもできます。たとえば、md:ring-offset-4 を使用して、中規模の画面サイズ以上でのみ ring-offset-4 ユーティリティを適用します。

<button class="ring-2 ring-offset-2 md:ring-offset-4">
  <!-- ... -->
</button>

詳細については、 レスポンシブデザイン, ダークモード と その他のメディアクエリ修飾子に関するドキュメントを参照してください。.

​カスタム値の使用

​テーマのカスタマイズ

生成されるリングオフセット幅のユーティリティをカスタマイズするには、tailwind.config.js ファイルの theme セクションにある ringOffsetWidth キーの下にカスタム値を追加します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      ringOffsetWidth: {
        '3': '3px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}

デフォルトテーマのカスタマイズの詳細については、テーマのカスタマイズ ドキュメントを参照してください。

​任意の値

一意のring-offset値を使用する必要がある場合テーマに含めるのは意味がありません。角括弧を使用して、任意の値を使ってプロパティを動的に生成してください。

<div class="ring-offset-[3px]">
  <!-- ... -->
</div>

任意の値のサポートの詳細については、 任意の値 ドキュメントをご覧ください。