Tailwind CSS 練習問題 40：Tailwindの設定ファイルによるテーマ拡張
プロジェクト独自のブランドカラー（例：`brand: '#1da1f2'`）を追加し、`bg-brand`のようなクラスとして使えるようにしつつ、Tailwindの標準カラーパレットは維持したままにしたい場合、tailwind.config.jsでの正しい設定方法はどれか。
- theme.extend.colorsオブジェクトに`brand: '#1da1f2'`を追加する
- theme.colorsを直接`brand: '#1da1f2'`のみで上書きする（既存色は失われる）
- plugins配列に`require('tailwindcss-brand-color')`というプラグインを追加する
- content配列に`brand: '#1da1f2'`という値を追加してスキャン対象に含める
- variants.extend.backgroundColorに`brand: '#1da1f2'`を追加する
正解と解説を見る
正解：theme.extend.colorsオブジェクトに`brand: '#1da1f2'`を追加する
既存の標準カラーパレットを維持しながら独自の色を追加するには、`theme`を直接上書きするのではなく`theme.extend`配下に定義を追加する必要があります。
【正解の理由】
`theme.extend.colors`に新しい色を追加すると、標準のカラーパレットはそのまま保持されつつ、`brand`という新しい色名が使えるようになり、`bg-brand`や`text-brand`といったクラスが自動生成されます。
【不正解の理由】
• 「theme.colorsを直接brandのみで上書きする」：この方法では既存の標準カラーパレット全体が失われてしまい、質問の条件を満たさない
• 「plugins配列にプラグインを追加する」：架空のパッケージ名であり、色の追加は`theme.extend`で行うのが標準的な方法である
• 「content配列に値を追加する」：`content`はスキャン対象のファイルパスを指定する設定であり、色の定義とは無関係
• 「variants.extend.backgroundColorに追加する」：`variants`は状態バリアント（hover等）の有効化を制御する設定であり、新しい色自体を定義する場所ではない