Tailwind CSS 練習問題 74：SVGのスタイル（塗りつぶし色）
📊 Qraftユーザーの成績
- 難易度 Cランク（レーティング1190）
- 難易度 1298位/2795問中
- 正答率 100%（1/1回正解）
Tailwind CSSにおいて、インラインSVGアイコンの色を制御したい場合、正しいものはどれか。
- `svg-color` クラスを指定し、SVGの塗りつぶし色を親要素の文字色と完全に一致させる。
- `fill-inherit` クラスを指定し、SVGの塗りつぶし色を親要素の文字色と完全に一致させる。
- `bg-current` クラスを指定し、SVGの塗りつぶし色を親要素の文字色と完全に一致させる。
- `fill-current` クラスを指定し、SVGの塗りつぶし色を親要素の文字色と完全に一致させる。
- `text-fill` クラスを指定し、SVGの塗りつぶし色を親要素の文字色と完全に一致させる。
正解と解説を見る
正解：`fill-current` クラスを指定し、SVGの塗りつぶし色を親要素の文字色と完全に一致させる。
Tailwind CSSにおいて、SVGの塗りつぶし色を親要素の文字色と一致させる場合、`fill-current`クラスを使用するのが正解です。
【正解の理由】
CSSの `fill: currentColor;` に対応するクラスが `fill-current` です。このクラスをSVG要素に適用すると、そのSVGは親要素のテキストカラー（例：`text-blue-500`）を自動的に引き継いで塗りつぶされるため、アイコンの色管理が非常に簡単になります。
【不正解の理由】
• 「`svg-color` クラス」は誤り。SVG専用の色指定クラスとしてそのような名称のものは存在しません。
• 「`fill-inherit` クラス」は誤り。`inherit` は親のプロパティを継承する意味ですが、現在の文字色を参照するクラスは `fill-current` です。
• 「`bg-current` クラス」は誤り。これは背景色（background-color）を現在の文字色と同じにするクラスであり、SVGの塗りつぶし（fill）には影響しません。
• 「`text-fill` クラス」は誤り。そのようなクラスはなく、テキストカラーは通常 `text-{color}` で指定します。