Tailwind CSS 練習問題 51：フォーカススタイル（リング装飾）
Tailwind CSSにおいて、ボタンなどの要素の周囲に、アウトラインの代わりに装飾的な枠線（リング）を描画したい場合、正しいクラスの例はどれか。
- 装飾用の枠として「ring-2」を付与する
- 装飾用の枠として「border-ring」を付与する
- 装飾用の枠として「outline-ring」を付与する
- 装飾用の枠として「focus-ring」を付与する
- 装飾用の枠として「shadow-ring」を付与する
正解と解説を見る
正解：装飾用の枠として「ring-2」を付与する
アウトラインの代わりに装飾的な枠線を描画したい場合、「ring-2」などのクラスを付与するのが正解です。
【正解の理由】
Tailwind CSSには、`box-shadow`を利用して要素の周りに枠線のようなリングを描画する「ring」ユーティリティ（例: ring-2, ring-4）があり、フォーカス時などに美しくハイライトするために使われます。
【不正解の理由】
• 「装飾用の枠として『border-ring』を付与する」は、存在しないクラス名であるため誤り
• 「装飾用の枠として『outline-ring』を付与する」は、存在しないクラス名であるため誤り
• 「装飾用の枠として『focus-ring』を付与する」は、状態バリアント（focus:ring）と混同しており、単体のクラス名として存在しないため誤り
• 「装飾用の枠として『shadow-ring』を付与する」は、存在しないクラス名であるため誤り