Tailwind CSS 練習問題 62：擬似要素のスタイル
Tailwind CSSにおいて、`<input>`タグなどの入力欄に表示されるプレースホルダー（入力ヒントのテキスト）の文字色を赤色（red-500）に設定したい場合、正しいクラスはどれか。
- `placeholder-red-500` クラスを使用する
- `text-placeholder-red` クラスを使用する
- `input-hint-red-500` クラスを使用する
- `ph-text-red-500-color` クラスを使用する
- `hint-color-red-500` クラスを使用する
正解と解説を見る
正解：`placeholder-red-500` クラスを使用する
正解は、「placeholder-」から始まるユーティリティクラスを使用する記述です。
【正解の理由】
Tailwind CSSには、入力欄のプレースホルダー（未入力時に表示される薄い案内テキスト）のスタイルを変更するための `placeholder-{color}` という専用のプレフィックスが用意されています。これを使うことで、CSSの `::placeholder` 疑似要素にスタイルを当てるのと同じ効果を得られます。
【不正解の理由】
• 「`text-placeholder-red`」というクラスは、通常のテキスト色指定の構文から外れており無効
• 「`input-hint-red-500`」というクラスは、Tailwindの命名規則に存在しない独自仕様のような名前であり誤り
• 「`ph-text-red-500-color`」のように「ph-」という省略形を用いたプレフィックスは公式に存在しない
• 「`hint-color-red-500`」というクラスは、プレースホルダーを「hint」と表現する独自の命名でありサポートされていない