リング幅

​基本的な使い方

​リングの追加

要素に特定の太さのソリッドなボックスシャドウを適用するには、ring-{width}ユーティリティを使用します。リングはデフォルトで半透明の青色で、多くのシステムでのデフォルトのフォーカスリングスタイルに似ています。

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

リングユーティリティは、通常のshadow-{size}ユーティリティと適切に組み合わさり、同じ要素に組み合わせることができます。

また、ringColor、ringOpacity、およびringOffsetWidthユーティリティを使用して、リングの色、不透明度、およびオフセットを制御できます。

​フォーカスリング

リング幅ユーティリティを使用すると、ring-{width}ユーティリティの先頭にfocus:を追加することで、カスタムフォーカスリングを簡単に使用できます。

<button class="... focus:ring-2">Save Changes</button>

focusバリアントは、ringColor、ringOpacity、ringOffsetWidth、およびringOffsetColorユーティリティに対してデフォルトで有効になっています。

​インセットリング

リングを要素の外側ではなく内側にレンダリングさせるには、ring-insetユーティリティを使用します。これは、リングの一部が表示されない画面の端にある要素で役立ちます。

<button class="... ring-2 ring-pink-300 ring-inset">
  Save Changes
</button><button class="... ring-2 ring-pink-500 ring-inset">
  Save Changes
</button>

​条件付き適用

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

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

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

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

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

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

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

詳細については、以下のドキュメントを確認してください。 レスポンシブデザイン, ダークモードおよび その他のメディアクエリ修飾子.

​カスタム値の使用

​テーマのカスタマイズ

デフォルトでは、Tailwindにはいくつかの汎用ring-widthユーティリティが含まれています。これらの値は、tailwind.config.jsファイルのtheme.ringWidthまたはtheme.extend.ringWidthを編集してカスタマイズできます。

module.exports = {
  theme: {
    extend: {
      ringWidth: {
        '10': '10px',
      }
    }
  }
}

デフォルトテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。

​任意の値を設定する

テーマに含めるのが適切ではない、一度限りのring値を使用する必要がある場合は、任意の値を角括弧で囲むことで、プロパティをその場で生成できます。

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

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