Tailwind CSS 練習問題 24：Tailwindのボーダー（border）ユーティリティ
Tailwind CSSにおいて、ボタン要素に幅1px・色gray-300の枠線（ボーダー）をすべての辺に設定したい場合、正しいクラスの組み合わせはどれか。
- border border-gray-300
- outline outline-gray-300
- border-width-1 border-color-gray-300
- line border-gray-300
- border-1px border-gray-300
正解と解説を見る
正解：border border-gray-300
Tailwind CSSでは枠線を付ける際、太さを指定しない「border」だけで幅1pxの枠線が全辺に適用され、色は「border-{color}-{shade}」で指定します。
【正解の理由】
「border」は単体でborder-width: 1pxを適用するデフォルトのユーティリティクラスであり、border-gray-300で枠線の色をグレーに指定できます。組み合わせることで1px・グレーの枠線が実現します。
【不正解の理由】
• 「outline outline-gray-300」：outlineはborderとは異なるCSSプロパティであり、要素の外側の輪郭線を指すため、枠線（border）の指定にはならない
• 「border-width-1 border-color-gray-300」：Tailwindの実際のクラス名とは異なる架空の命名で、正しくはborder-1やborder-gray-300という形式になる
• 「line border-gray-300」：lineというクラスはTailwindに存在しない
• 「border-1px border-gray-300」：Tailwindのボーダー幅指定はborder（1px）、border-2、border-4のように数値のみで指定し、border-1pxという単位付きのクラス名は存在しない