Tailwind CSS 練習問題 61：色の不透明度
Tailwind CSSにおいて、背景色に「blue-500」を指定しつつ、その色の不透明度（アルファチャンネル）を50%に設定したい場合、正しい記述はどれか。（※opacityユーティリティを別で付与するのではなく、色指定と同時に設定するモダンな記法とする）
- クラス名として `bg-blue-500/50` を指定する
- クラス名として `bg-blue-500-50` を指定する
- クラス名として `bg-blue-500:50` を指定する
- クラス名として `bg-blue-500_50` を指定する
- クラス名として `bg-blue-500%50` を指定する
正解と解説を見る
正解：クラス名として `bg-blue-500/50` を指定する
正解は、色指定のクラス名の末尾にスラッシュ（/）と数値を続ける記法です。
【正解の理由】
Tailwind CSSでは、`bg-blue-500/50`のようにカラースケールの後ろにスラッシュと数値を指定することで、色の不透明度（アルファチャンネル）を直接設定できます。これにより、個別のopacityユーティリティを使わずに簡潔に記述できます。
【不正解の理由】
• 「`bg-blue-500-50`」というハイフン繋ぎの記法は、Tailwindの設定に存在しないため無効なクラスとなる
• 「`bg-blue-500:50`」というコロンを用いた記法は、ホバーなどの状態バリアントの記述法であり不透明度指定としては誤り
• 「`bg-blue-500_50`」というアンダースコアを用いた記法は、Tailwindではサポートされていない
• 「`bg-blue-500%50`」というパーセント記号を用いた記法は、CSSクラス名として不適切な文字を含むため誤り