【Tailwind和訳】BORDERS/Ring Width

この記事について

この記事は、BORDERS/Ring Widthの記事を和訳したものです。

Ring Width

ボックスシャドウでアウトラインリングを作成するためのユーティリティーです。

クラス	プロパティ
ring-0	box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-1	box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-2	box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring	box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-4	box-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-8	box-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);
ring-inset	--tw-ring-inset: inset;

使用方法

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

<button class="... ring-0">ring-0</button>
<button class="... ring-2">ring-2</button>
<button class="... ring">ring</button>
<button class="... ring-4">ring-4</button>

リング状のユーティリティーは、通常のshadow-{size}のユーティリティーと優雅に組み合わされ、同じ要素に組み合わせることができます。
また、ringColor、ringOpacity、ringOffsetWidthユーティリティーを使って、リングの色、不透明度、オフセットをコントロールすることもできます。

Focus rings

focusvariant は、デフォルトではring-{width}ユーティリティーに対して有効になっているので、任意のring-{width} ユーティリティーの先頭にfocus:を追加することで、簡単にカスタムフォーカススタイルに使用することができます。

<button class="... focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50">
  Button
</button>

focusvariant は、ringColor、ringOpacity、ringOffsetWidth、およびringOffsetColorユーティリティでもデフォルトで有効です。

インセットリング

ring-insetユーティリティーを使用すると、リングを要素の外側ではなく内側にレンダリングさせることができます。これは、リングの一部が見えない画面の端にある要素に便利です。

<button class="... ring-4 ring-pink-300">Default</button>

<button class="... ring-4 ring-pink-300 ring-inset">Inset</button>

---

レスポンシブ

特定のブレークポイントでリング幅を制御するには、既存のリング幅ユーティリティーに{screen}:というプレフィックスを追加します。例えば、md:ring-4を使用すると、medium スクリーンサイズ以上でのみring-4ユーティリティを適用することができます。

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

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

---

カスタマイズ

どのリング幅のユーティリティが生成されるかをカスタマイズするには、tailwind.config.jsファイルのthemeセクションにあるringWidthキーの下にカスタム値を追加します。DEFAULTキーを使用して、plainringユーティリティに使用される幅を指定することができます。

tailwind.config.js

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

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

Variants

デフォルトでは、リング幅のユーティリティーに対して、レスポンシブ、フォーカスウィズイン、フォーカスバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションにあるringWidthプロパティを変更することで、リング幅のユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、このコンフィグは hover と active のバリエーションも生成します:

tailwind.config.js

module.exports = {
    variants: {
      extend: {
        // ...
+      ringWidth: ['hover', 'active'],
      }
    }
  }

無効化

リング幅のユーティリティーをプロジェクトで使用しない場合は、設定ファイルのcorePluginsセクションでringWidthプロパティをfalseに設定することで、ユーティリティーを完全に無効にすることができます:

tailwind.config.js

 module.exports = {
    corePlugins: {
      // ...
+    ringWidth: false,
    }
  }