Tailwind Configでカスタムカラーパレットを定義

Tailwindでカスタムカラーを定義する

Tailwind設定のtheme.extend.colorsセクションで、デフォルトパレットを超えたブランド固有およびプロジェクト固有のカラーを定義します。

基本的なカラー定義

最もシンプルな方法は、フラットなキー・バリューペアを追加することです：

colors: {
  "brand": "#1a73e8",
  "accent": "#ff6b35",
}

これによりbg-brand、text-accent、border-brandなどのクラスが使えるようになります。

シェードスケールの構築

本番プロジェクトでは通常、各カラーの複数のシェードが必要です。Tailwindは数値キーのネストされたオブジェクトを期待します。

CSS変数を使ったテーマ設定

CSSカスタムプロパティとTailwindカラーを組み合わせる強力なパターンがあります。

Extend vs Override

theme.extend.colorsを使用すると、デフォルト（blue、red、greenなど）と並んでカラーが追加されます。theme.colorsを直接使用すると、カラーパレット全体が置き換えられます。